業務需求:在頁面某個固定區域滑動
思路:滑動高度 = 頁面高度 - 自定義導航高度(不是自己自定義的導航可以省略)- 按鈕高度 - 單詞數高度
實現 : ???1.數據展示區內使用scroll-view,設置y軸滾動(給固定高度=滑動高度)
????????????????2.計算展示區盒子的高度,僅在范圍內允許滾動
????????????????3.保持頁面固定,下拉觸底時不能帶動頁面滾動
getScrollHeight() {const that = this;wx.getSystemInfo({success: (res) => {let systemInfo = wx.getSystemInfoSync();//頁面高度let windowHeight = systemInfo.windowHeight;// that.statusBarHeight = systemInfo.statusBarHeight;// 膠囊位置信息let rect = wx.getMenuButtonBoundingClientRect();// that.menuButtonRect = JSON.parse(JSON.stringify(rect));let navBarHeight =(rect.top - systemInfo.statusBarHeight) * 2 + rect.height;// this.navBarHeight = navBarHeight;// 自定義導航欄的高度let height = systemInfo.statusBarHeight + navBarHeight;let query = wx.createSelectorQuery().in(that);query.select(".nav-btn").boundingClientRect();query.select(".collect-btn").boundingClientRect();query.select(".nav-bg").boundingClientRect();query.exec((res) => {let h1 = res[0].height;let h2 = res[1].height;let h3 = res[2].height;that.navBgHeight = h3;let scrollHeight = windowHeight - h1 - h2 - height;that.scrollHeight = scrollHeight;});},});},//HTML<scroll-viewscroll-yscroll-with-animation@scrolltolower="handleScrolltolower"class="bs scroll-view":style="{ maxHeight: `${scrollHeight}px` }"><viewstyle="padding: 0 30rpx 30rpx 30rpx"v-if="navList[0].isActivation"><collect-list @toTranslate="toTranslate" ref="collectList" /></view><sign-list@cancelSign="cancelSign"v-if="navList[2].isActivation || navList[1].isActivation"/></scroll-view>
scroll-view的事件。
bindscrolltoupper 觸頂事件,放入下拉刷新處理方法
bindscrolltolower 觸底事件,放入觸底加載處理方法
根據自己的需要添加
觸底之后可能會出現父盒子會下拉,導致出現頁面空白bug
解決方法==>在pages.json文件夾加上"disableScroll":true 屬性
{"path": "pages/tabbar/collect","style": {"navigationBarTitleText": "收藏","navigationStyle": "custom","disableScroll":true}},