微信小程序-上拉加载和下拉刷新

news2024/11/15 11:51:38

一.上拉加载

微信小程序的上拉加载使用onReachBottom(),写在.js文件里面的Page方法里面。

onReachBottom(){
    //上拉自动更新到4,5,6
    wx.showLoading({
      title: '数据加载中...',
    })
    setTimeout(()=>{
      const lastNum=this.data.numList[this.data.numList.length-1]
      const newAry=[lastNum+1,lastNum+2,lastNum+3]
      this.setData({
        numList:[...this.data.numList,...newAry]
      })
      wx.hideLoading()
    },1500)
  }

onReachBottom()会监听微信小程序上拉操作。
需要在.json文件里面配置"onReachBottomDistance"属性。
如下面的代码,在距离底部50px的时候会触发到onReachBottom()

"onReachBottomDistance": 50px

二.下拉刷新

下拉刷新使用onPullDownRefresh()

  onPullDownRefresh(){
    //下拉刷新后,显示1,2,3
    this.setData({
      numList:[1,2,3]
    })
    if(this.data.numList.length === 3){
      wx.stopPullDownRefresh()
    }
  }

注意,在使用onPullDownRefresh() 的时候,需要及时使用wx.stopPullDownRefresh()进行关闭,不然可能会长时间显示刷新状态
在这里插入图片描述

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

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

相关文章

nodejs——ejs模版遇到原型链污染产生rce

[GYCTF2020]Ez_Express 打开是一个登陆框 在源代码中找到 在代码里找到敏感关键字 找到merge 想到原型链污染 这里登陆只能用ADMIN才能登陆成功 但是这里index.php又设置了一个waf ban了admin的大小写 这里需要绕过这个waf 看注册这段代码 用的是这个toUpperCase()函数 之前…

Ubuntu安装Vins-Fusion(1) —— Ubuntu18.04安装vins

目录 前言 1、准备1.1 安装ROS1.2 安装 Ceres Solver 2、安装 VINS-Fusion3、测试(EuRoC MAV 数据集)3.1、下载数据集3.2 Monocualr camera IMU3.3 Stereo cameras IMU3.4 Stereo cameras 参考 前言 VINS-Fusion 是一种基于优化的多传感器状态估计器&…

Java集合框架源码分析:LinkedList

文章目录 一、LinkedList特性二、LinkedList底层数据结构三、LinkedList继承关系参考: 一、LinkedList特性 特性描述是否允许为空允许是否允许重复数据允许是否有序有序是否线程安全非线程安全 二、LinkedList底层数据结构 LinkedList同时实现了List接口和Deque接…

尚品汇项目2

p68 加入产品个数操作 p69 加入购物车

【YOLOv10:在简约中发现卓越,VanillaNet定义目标检测新标准】

本文改进:神经网络模型VanillaNet 1.YOLOv10介绍 论文:[https://arxiv.org/pdf/2405.14458] 代码: https://gitcode.com/THU-MIG/yolov10?utm_source=csdn_github_accelerator&isLogin=1 摘要:在过去的几年里,由于其在计算成本和检测性能之间的有效平衡,YOLOS已经成…

多模态大模型解读

目录 1. CLIP 2. ALBEF 3. BLIP 4. BLIP2 参考文献 (2023年)视觉语言的多模态大模型的目前主流方法是:借助预训练好的LLM和图像编码器,用一个图文特征对齐模块来连接,从而让语言模型理解图像特征并进行深层次的问…

AI绘画新境界:如何利用智能工具打造未来艺术

引言 AI技术的发展加速了我们的生活和工作方式,艺术领域也不例外。今天,AI已经超越了辅助工具的角色,开始成为艺术创造过程中的一个内在组成部分。本文将探讨如何利用AI智能工具在绘画艺术领域开辟新的境界,并结合互联网技术以及实…

淘宝评论数据接口,助力无忧购物

在数字化时代,消费者在网购时越来越重视其他用户的评价和意见。淘宝作为我国最大的电商平台之一,拥有海量的商品评论数据。如何有效利用这些数据,为消费者提供参考,同时保护他们的权益,是我们要探讨的问题。联讯数据将…

文件加密软件排行榜|常用三款文件加密软件推荐

Top 1: 安秉网盾文件加密软件 加密模式多样:采用多种加密模式,对企业重要的文档、图纸进行全方位360度保护。可根据企业不同工作场景设置不同的加密模式。 全透明加密:通过全透明加密模式,对企业重要的图纸文件类型进行全盘透明…

C++ 76 之 异常变量生命周期

#include <iostream> #include <string> using namespace std;class MyExpetion{ public:MyExpetion(){cout << "默认构造函数" << endl;}MyExpetion(const MyExpetion& e){cout << "复制构造函数"<< endl;}~MyEx…

【IPython的使用技巧】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

AMBA-CHI协议详解(四)

《AMBA 5 CHI Architecture Specification》 AMBA-CHI协议详解&#xff08;一&#xff09; AMBA-CHI协议详解&#xff08;二&#xff09; AMBA-CHI协议详解&#xff08;三&#xff09; AMBA-CHI协议详解&#xff08;四&#xff09; 文章目录 2.3.3 Atomic transactions2.3.4 S…

day14-226.翻转二叉树+101. 对称二叉树+104.二叉树的最大深度

一、226.翻转二叉树 题目链接&#xff1a;https://leetcode.cn/problems/invert-binary-tree/ 文章讲解&#xff1a;https://programmercarl.com/0226.%E7%BF%BB%E8%BD%AC%E4%BA%8C%E5%8F%89%E6%A0%91.html#%E7%AE%97%E6%B3%95%E5%85%AC%E5%BC%80%E8%AF%BE 视频讲解&#xff1…

Vue CLI,Vue Router,Vuex

前言 Vue CLI、Vue Router 和 Vuex 都是 Vue.js 生态系统中的重要组成部分&#xff0c;它们在构建 Vue 应用程序时扮演着关键角色。 Vue CLI Vue CLI 介绍 Vue CLI 是 Vue.js 的官方命令行工具&#xff0c;用于快速搭建 Vue.js 项目。它提供了一个图形界面&#xff08;通过…

对身外之物,不必在意

不管对待自己还是他人&#xff0c;外在的条件不值得挂怀&#xff0c;人在不得已颠沛流离时期&#xff0c;吃不好、穿不好&#xff0c;都应该从容接受。

STM32学习记录(八)————定时器输出PWM及舵机的控制

文章目录 前言一、PWM1.工作原理2.内部运作机制3. PWM工作模式4.PWM结构体及库函数 二、PWM控制舵机 前言 一个学习STM32的小白~ 有错误评论区或私信指出提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、PWM 1.工作原理 以向上计数为例&#xff0…

【LeetCode刷题】面试题 17.19. 消失的两个数字

1. 题目链接2. 题目描述3. 解题方法4. 代码 1. 题目链接 面试题 17.19. 消失的两个数字 2. 题目描述 3. 解题方法 例子假设&#xff1a; 数组A元素为 &#xff1a;1 &#xff0c;4&#xff0c;5 缺少的元素为&#xff1a;2&#xff0c; 3 那么所有整数就为1 ~ 5&#xff…

【JavaEE】Spring Web MVC详解

一.基本概念. 什么是Spring Web MVC? 官方链接: https://docs.spring.io/spring-framework/reference/web/webmvc.html Spring Web MVC is the original web framework built on the Servlet API and has been included in the Spring Framework from the very beginning. Th…

人工智能—美国加利福尼亚州房价预测实战

引言 在当今快速发展的房地产市场中&#xff0c;房价预测已成为一个至关重要的领域。它不仅关系到投资者的决策&#xff0c;也直接影响到普通购房者的生活质量。特别是在美国加利福尼亚州&#xff0c;这个以其高房价和房地产市场的波动性而闻名的地方&#xff0c;准确的房价预…

【面试八股总结】Redis数据结构及底层实现

一、五种基本数据结构 Redis 提供了丰富的数据类型&#xff0c;常见的有五种数据类型&#xff1a;String&#xff08;字符串&#xff09;&#xff0c;Hash&#xff08;哈希&#xff09;&#xff0c;List&#xff08;列表&#xff09;&#xff0c;Set&#xff08;集合&#xff0…