小程序页面指定区域局部滚动，做上拉和触底刷新

愉快的小跳蛙2024-03-06 21:41

业务需求：在页面某个固定区域滑动

思路：滑动高度 = 页面高度 - 自定义导航高度（不是自己自定义的导航可以省略）- 按钮高度 - 单词数高度

实现： 1.数据展示区内使用scroll-view，设置y轴滚动（给固定高度=滑动高度）

2.计算展示区盒子的高度，仅在范围内允许滚动

3.保持页面固定，下拉触底时不能带动页面滚动

javascript 复制代码

  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-view
          scroll-y
          scroll-with-animation
          @scrolltolower="handleScrolltolower"
          class="bs scroll-view"
          :style="{ maxHeight: `${scrollHeight}px` }"
        >
          <view
            style="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 属性

javascript 复制代码

        {
            "path": "pages/tabbar/collect",
            "style": {
                "navigationBarTitleText": "收藏",
                "navigationStyle": "custom",
                "disableScroll":true
            }
        },