微信小程序 滚动到底部加载新的数据 之后滚动到顶部

news2024/12/29 10:48:25

1.配置到底部监听

在app.json的window里面加入

里面的300表示距离底部300rpx触发onReachBottom事件 默认50rpx

 "window": {
    "onReachBottomDistance": 300
  },

2.在数据列表的js页面

  /**
   * 页面上拉触底事件的处理函数
   */
   onReachBottom() {
    console.log("到底部了");
    // 把字符串转为数字进行加减
    let page = parseInt(this.data.page)
    // 当前数据到底部就把page+1传入获取第二页数据合并
    page = parseInt(page + 1)
    console.log(page);
    this.setData({
      page:page
    })
    this.getClue(page)
  },

// 请求数据方法
getClue(page) {
    getClueApi({
      page
    }).then((res) => {
        // 请求返回的数据
      console.log(res.data);
       // 把请求到的数据与前一次的数据合并,第一次的时候定义的列表要为空[]
       let list = []
        // 判断当前是否为第一页,在还有其他筛选条件的情况下,其他筛选条件更新时,传入的this.data.page为1 就会覆盖整个list数据
      if (page != 1) {
        list = [...this.data.list, ...res.data.list.data]
      } else {
       // 传入1就初始化为1
        this.setData({
          page:page
        })
        // 滚动到顶部
        wx.pageScrollTo({
          scrollTop: 0
      })
        list = res.data.list.data
      }
      this.setData({
        list: list,
        cluestatus: res.data.status,
      })
    })
  },
// 其他筛选触发的事件
 input() {
    if (this.data.seek != "") {
        // 这里传入的page为1 所以会重新覆盖list数据
      this.getClue(1, this.data.seek)
    } else {
      Toast({
        position: "top",
        message: '请输入搜索词!'
      });
    }
  },

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/704727.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

采用 CD4011 的温度监测自动控制电路

该电路结构简单,制作容易,由一只与非门和一只热敏电阻组成测控电路和警笛声发声电路,由一只继电器作为执行电路。 一、电路工作原理 电路原理如图 8 所示。 测温电阻RT接在控制门D1的输入端,它和电阻R1、R2及RP通过RP的分压调节…

Cesium入门之十一:认识Cesium中的Entity

目录 Entity类简介Entity在Cesium中的作用Entity的常用属性使用Entity创建点、线、面常用的Entity图形对象及其属性创建点、线、面的方法创建点创建线创建面将点、线、面添加到viewer中 修改Entity的外观和样式点(Point)的外观样式线(Polylin…

蓝奥声核心技术——无线协同代理技术

1.技术背景 无线协同代理技术指基于对目标场景状态变化的协同感知而获得触发响应并进行智能决策,属于蓝奥声核心技术--边缘协同感知(EICS)技术的关键支撑性技术之一。该项技术涉及物联网边缘域的无线通信技术领域,具体主要涉及网络服务节点与…

mysql编写sql脚本:要求表没有主键,但是想查询没有相同值的时候才进行插入

文章目录 背景说明 背景说明 我这里主要针对2处地方要进行增量执行sql: 1.新功能需要创建一张新表结构indicator_alarm_threshold2.给菜单表和另一个表新增数据 我们现在使用的是项目启动先初始化加载init-table.sql的脚本(这里面的轻易不动了,保持原…

浏览器测试的三大挑战及解决方案

目录 跨浏览器测试,为什么重要 跨浏览器测试挑战及其解决方案 自动化挑战大 解决方案:正确选择工具 设施维护负担大 解决方案:选择可靠的云服务 浏览器适配列表太多 解决方案:选择多版本支持的平台 总结: 随着…

关于Nuxt3.6兼容低版本游览器的实战以及可能存在的问题

当我们网站打包上线后,有些问题我们肯定也要考虑在内,兼容性也是其中一个重要的一种,可能会有人说,都2023年了,还在乎那些废弃的游览器干啥,我只能说,错!大错特错! 我们不…

docker方式安装gitlab

一:docker 方式安装gitlab 用docker来安装比较方便简单,包括版本升级也会变得更简单。 1、拉取gitlab镜像 gitlab-ce表示的是社区免费版本 docker pull gitlab/gitlab-ce:latest2、创建映射文件 mkdir -p /data/docker/gitlab/etc mkdir -p /data/do…

虚拟现实(VR)在医疗保健中的5种应用

医疗保健中的VR虚拟现实 虚拟现实的由来已久,18世纪,法国的医生使用布制的分娩模拟器向助产师和外科医生教授医学技术。在20世纪60年代初,医生一边对心肺复苏学员口述心肺复苏的技巧,一边使用一家塑料玩具厂家制造的塑料娃娃现场…

前端开发工程师的自我修养:前端开发工程师必须掌握的 Promise(详解)以及在 Vue3 项目中的实战应用

文章目录 📋前言🎯关于 promise(用于使用 JavaScript 编写的 Windows 应用商店应用)的内容分享🧩promise 究竟是什么?承诺关系 🎯JavaScript Promise🧩认识了解 Promise &#x1f3a…

RK3568平台开发系列讲解(外设篇)HX711调试

🚀返回专栏总目录 文章目录 一、HX711 工作原理二、硬件连接三、驱动四、修改设备树五、测试沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇我们将讲解 HX711 模块调试。 一、HX711 工作原理 该部分由应变片与 HX711 模数转换器组成。应变片上的压力变化引起应…

线程基础、线程之间的共享和协作(初篇)

什么是进程和线程? 进程是操作系统进行资源分配的最小单位。资源包括cpu,内存空间,磁盘io等。同一进程里的多个线程共享该进程的全部系统资源。而进程与进程之间是相互独立的。 线程是cpu调度的最小单位,必须依托于进程而存在。…

高斯金字塔的秘密,尺度空间证明的思考

在构建图像尺度空间的过程中,唯一使用的核函数是高斯核,这一点被T Lindeber在文献《Scale-space theory: a basic tool for analyzing structures at different scales》中证明,高斯核是唯一可以产生多尺度空间的核。 相信大家在使用高斯金字…

Linux多线程与fork()函数

4.1多线程中使用进程复制 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<unistd.h> #include<pthread.h> void* fun(void* arg) {for(int i0;i<5;i){printf("fun run pid%d\n",getpid());sleep(1);} } int m…

基于人工智能与边缘计算Aidlux的鸟类检测驱赶系统(可修改为coco 80类目标检测)

●项目名称 基于人工智能与边缘计算Aidlux的鸟类检测驱赶系统&#xff08;可修改为coco 80类目标检测&#xff09; ●项目简介 本项目在Aidlux上部署鸟类检测驱赶系统&#xff0c;通过视觉技术检测到有鸟类时&#xff0c;会进行提示。并可在源码上修改coco 80类目标检测索引直…

554、Vue 3 学习笔记 -【常用Composition API(二)】 2023.06.30

目录 一、常用Composition API1. 拉开序幕的setup2. ref函数3. reactive函数4. Vue3.0中的响应式原理5. reactive对比ref 二、参考链接 一、常用Composition API 1. 拉开序幕的setup &#xff08;1&#xff09;Vue3.0中一个新的配置项&#xff0c;值为一个函数。 &#xff08…

逍遥自在学C语言 | 常见的预定义宏

前言 在C语言中&#xff0c;预定义宏是由编译器提供的一组特殊标识符&#xff0c;可以在程序中直接使用&#xff0c;无需进行额外的定义。 预定义宏可以提供有关源文件、行号、日期、时间和函数名等信息&#xff0c;对于调试和日志记录非常有用。 一、人物简介 第一位闪亮登…

解决Windows联想笔记本打不开文件,鼠标一直转圈圈的问题

在左下角搜索处输入cmd 然后输入以下命令&#xff1a; DISM.exe /Online /Cleanup-image /Scanhealth 回车 等它运行完 再输入&#xff1a; DISM.exe /Online /Cleanup-image /Restorehealth 回车 等它运行完 再输入&#xff1a; sfc /scannow 等它运行完&#xff0…

Python3,如何实现CPU的并行计算,那还不简单,5种方式,这篇就搞定。

多进程实现CPU并行计算 1、引言2、实战2.1 多进程模式2.1.1 定义2.1.2 multiprocessing2.1.3 模式2.1.4 适用场景2.1.4 代码示例 2.2 执行方法2.2.1 多线程并发执行2.2.2 进程池2.2.3 消息队列2.2.4 内存共享2.2.5 异步IO 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c;…

神奇的甲方:恰恰是拔高我们最好的机遇!

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

LeetCode 打卡day52--动态规划之子序列问题

一个人的朝圣 — LeetCode打卡第52天 知识总结 Leetcode 300. 最长递增子序列题目说明代码说明 Leetcode 674. 最长连续递增序列题目说明代码说明 Leetcode 718. 最长重复子数组题目说明代码说明 知识总结 今天运用动态规划来解决子序列问题. 子序列 是由数组派生而来的序列&a…