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

news/2024/7/20 2:13:16 标签: 小程序

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

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

实现 :    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-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 属性

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


http://www.niftyadmin.cn/n/5403970.html

相关文章

Pake 轻松构建轻量级多端桌面应用

Pake 利用 Rust 轻松构建轻量级多端桌面应用&#xff0c;支持 Mac / Windows / Linux。 小白用户&#xff1a;可以使用 「常用包下载」 方式来体验 Pake 的能力&#xff0c;也可试试 Action 方式。 开发用户&#xff1a;可以使用 「命令行一键打包」&#xff0c;对 Mac 比较友…

JAVAEE初阶 JVM(二)

垃圾回收和双亲委派模型 1.双亲委派模型2.垃圾回收机制(1) 识别垃圾1.引用计数2.可达性分析 (2) 销毁垃圾1.标记清除2.复制算法3.标记整理 3.分代回收 1.双亲委派模型 描述了如何查找.class文件的策略. 同时JVM中有专门进行类加载的操作,有一个模块,叫做类加载器. 上述就是为了…

AJAX 学习笔记(Day1)

「写在前面」 本文为黑马程序员 AJAX 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。 目录 0 课程介绍 1 AJAX 入门 1.1 AJAX 概念和 axios 使用 1.2 认识 URL 1.3 URL 查询参数 1.4 常用请求方法和数据提交 1.5 HT…

JVM学习目录

JVM ✅ JVM运行时内存结构 ✅ JVM常用启动参数 ✅ JVM内存分配与垃圾收集流程 ✅ 什么是垃圾回收机制&#xff08;Garbage Collection&#xff0c;简称GC&#xff09; ✅ 如何调用垃圾回收器的方法 ✅ GC如何判定对象已死 ✅ 方法区的垃圾收集 ✅ 垃圾收集算法 ✅ JVM垃圾回…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的体育赛事目标检测系统(Python+PySide6界面+训练代码)

摘要&#xff1a;开发和研究体育赛事目标检测系统对于增强体育分析和观赏体验至关重要。本篇博客详细讲述了如何运用深度学习技术构建一个体育赛事目标检测系统&#xff0c;并提供了完整的实现代码。系统基于先进的YOLOv8算法&#xff0c;对比了YOLOv7、YOLOv6、YOLOv5的性能&a…

2024最新算法:河马优化算法(Hippopotamus optimization algorithm,HO)求解23个基准函数,提供MATLAB代码

一、河马优化算法 河马优化算法&#xff08;Hippopotamus optimization algorithm&#xff0c;HO&#xff09;由Amiri等人于2024年提出&#xff0c;该算法模拟了河马在河流或池塘中的位置更新、针对捕食者的防御策略以及规避方法。河马优化算法的灵感来自河马生活中观察到的三…

张宇30讲学习笔记

初等数学 x \sqrt{x} x ​是算数平方根&#xff0c;一定≥0&#xff1b; x 2 \sqrt{x^2} x2 ​|x| 高等数学 线性代数

5.40 BCC工具之ustat.py解读

一,工具简介 ustat是一个类似于“top”的工具,用于监控高级语言中的事件。它为每个使用Java、Node、Perl、PHP、Python、Ruby和Tcl运行时的进程打印关于垃圾收集、方法调用、对象分配以及各种其他事件的统计信息。 二,代码示例 #!/usr/bin/pythonfrom __future__ import …