当前位置: 首页 > news >正文

【微信小程序】列表滚动触底更新实现

微信小程序开发系列


目录

  • 前言
  • 一、上拉触底事件函数onReachBottom
  • 二、实现


前言

在微信小程序开发中经常遇到分页列表需要滚动到底部之后进行请求数据更新,下面介绍如何进行触底更新分页展示。使用到页面上拉触底事件的处理函数onReachBottom


一、上拉触底事件函数onReachBottom

监听用户上拉触底事件,可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间,本事件只会被触发一次。
代码:

page.js

 /*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},

app.json

  "window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "练习","navigationBarTextStyle": "black","onReachBottomDistance": 100},

设置不同onReachBottomDistance的值,当滚动到不同位置时就会触发,单位是px。

二、实现

var http = require('../../utils/http.js');
var config = require('../../utils/config.js');Page({/*** 页面的初始数据*/data: {list: [],current: 1,pages: 0,sts: 0},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {if (options.sts) {this.setData({sts: options.sts});this.loadOrderData(options.sts, 1);} else {this.loadOrderData(0, 1);}},/*** 加载订单数据*/loadOrderData: function(sts, current) {var ths = this;wx.showLoading();//显示加载中//加载订单列表var params = {url: "page/myOrder",method: "GET",data: {current: current,size: 10,status: sts,},callBack: function(res) {var list = [];if (res.current == 1) {list = res.records;} else {list = ths.data.list;Array.prototype.push.apply(list, res.records);//设置请求的最新数据}ths.setData({list: list,pages: res.pages,current: res.current});wx.hideLoading();//隐藏加载中}};http.request(params);},/*** 状态点击事件*/onStsTap: function(e) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {if (this.data.current < this.data.pages) {//判断是否超过总页数this.loadOrderData(this.data.sts, this.data.current + 1);//加载数据}},/*** 用户点击右上角分享*/onShareAppMessage: function() {}
})

相关文章:

【微信小程序】列表滚动触底更新实现

微信小程序开发系列 目录 前言一、上拉触底事件函数onReachBottom二、实现 前言 在微信小程序开发中经常遇到分页列表需要滚动到底部之后进行请求数据更新&#xff0c;下面介绍如何进行触底更新分页展示。使用到页面上拉触底事件的处理函数onReachBottom。 一、上拉触底事件函…...

2023全国大学生数学建模竞赛A题B题C题D题E题思路+模型+代码+论文

目录 一. 2023国赛数学建模思路&#xff1a; 赛题发布后会第一时间发布选题建议&#xff0c;思路&#xff0c;模型代码等 详细思路获取见文末名片&#xff0c;9.7号第一时间更新 二.国赛常用的模型算法&#xff1a; 三、算法简介 四.超重要&#xff01;&#xff01;&…...

Git常见操作

一、全局配置命令 配置级别&#xff1a; –local&#xff08;默认&#xff0c;高级优先&#xff09;&#xff1a;只影响本地仓库 –global(中优先级)&#xff1a;只影响所有当前用户的git仓库 –system&#xff08;低优先级&#xff09;&#xff1a;影响到全系统的git仓库 1…...

thinkphp6前后端验证码分离以及验证

1.验证码接口生成验证码: public function verify(){return captcha(); } 也可以自己写方法 2.验证方法和普通模式session验证有区别,需要改原文件: 修改后的代码: <?php // +---------------------------------------------------------------------- // | ThinkP…...

jenkinsfile自动部署接口

复制创建新流水线 从预先创建的job中获取 config.xml 或根据需要创建另一个 curl -X GET http://xxx.xxx.xxxx.com/job/backup-data/config.xml -u test:xxxxxxxxxxxxxxxxxx-o config.xml 生成Crumb CRUMB$(curl -s http://xxxxxxx.xxx.xxx.com/crumbIssuer/api/xml?xpathc…...

26. 删除有序数组中的重复项

26. 删除有序数组中的重复项 给你一个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的…...

vue父页面获取子组件绑定值

<el-form-item label"图文详情" prop"imageText"><div><el-button type"primary" link>组件</el-button><WangEditor v-model"ruleForm.imageText"></WangEditor></div> </el-form-item…...

FPGA_学习_17_IP核_ROM(无延迟-立即输出)

由于项目中关于厂商提供的温度-偏压曲线数据已经被同事放在ROM表了&#xff0c;我这边可用直接调用。 今天在仿真的时候&#xff0c;发现他的ROM表用的IP核是及时输出的&#xff0c;就是你地址给进去&#xff0c;对应地址的ROM数据就立马输出&#xff0c;没有延迟。 我打开他的…...

CentOS7.6安装mysql8.0.34

一、查看服务器相关信息 cat /etc/redhat-release cat /proc/version [rootlocalhost ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) [rootlocalhost ~]# cat /proc/version Linux version 3.10.0-957.el7.x86_64 (mockbuildkbuilder.bsys.centos.org) …...

SCF金融公链新加坡启动会 链结创新驱动未来

新加坡迎来一场引人瞩目的金融科技盛会&#xff0c;SCF金融公链启动会于2023年8月13日盛大举行。这一受瞩目的活动将为金融科技领域注入新的活力&#xff0c;并为广大投资者、合作伙伴以及关注区块链发展的人士提供一个难得的交流平台。 在SCF金融公链启动会上&#xff0c; Wil…...

JavaScript【实例、静态方法与属性、原型链、instanceof 运算符、Object 对象的相关方法、对象的继承、多重继承、严格模式】(十九)

目录 实例、静态方法与属性 实例方法和静态方法...

【Git】本地搭建Gitee、Github环境

本地 &#xff08;Local&#xff09; 1、使用命令生成公钥&#xff08;pub文件&#xff09; 1. $ ssh-keygen -t rsa -C "xxxxxxxemail.com" -f "github_id_rsa" 2. $ ssh-keygen -t rsa -C "xxxxxxxemail.com" -f "gitee_id_rsa" …...

学习ts(四)联合类型、交叉类型、类型断言

联合类型 使用联合类型定义属性和方法&#xff0c;只要符合其中一种即可 let myPhone: string | number 010-7788 // let myPhone1: string | number true 因为没有包含boolean值 会报错const fn (something: number | boolean): boolean > {return !!something }con…...

Linux 内核与架构速查

Linux 内核与架构速查 博主博客 https://blog.uso6.comhttps://blog.csdn.net/dxk539687357 本文主要记录查询 Linux 计算机的内核与架构&#xff0c; 用于下载对应架构的第三方软件。 一、介绍 如上图所示&#xff0c; 有时候我们下载一些第三方软件&#xff0c; 软件会有很…...

【Java 动态数据统计图】动态数据统计思路案例(动态,排序,containsKey)五(117)

需求&#xff1a;前端根据后端的返回数据&#xff1a;画统计图&#xff1b; 1.动态获取地域数据以及数据中的平均值&#xff0c;按照平均值降序排序&#xff1b; 说明&#xff1a; X轴是动态的&#xff0c;有对应区域数据则展示&#xff1b; X轴 区域数据降序排序&#xff1b;…...

区块链碎碎念

现在的区块链早已过了跑马圈地的时代&#xff0c;现在还按照以前承接项目的方式做区块链只能是越来越艰难。经过几年的技术沉淀&#xff0c;做区块链项目的公司都已经没落的七七八八了。 区块链不是一个能够快速显现盈利能力的行业&#xff0c;相反这个行业目前的模式还是处于…...

4.物联网LWIP之C/S编程

LWIP配置 服务器端实现 客户端实现 错误分析 一。LWIP配置&#xff08;FREERTOS配置&#xff0c;ETH配置&#xff0c;LWIP配置&#xff09; 1.FREERTOS配置 为什么要修改定时源为Tim1&#xff1f;不用systick&#xff1f; 原因&#xff1a;HAL库与FREERTOS都需要使用systi…...

在 PyTorch 中使用关键点 RCNN 进行人体姿势估计--附源码

人体姿态估计是计算机视觉领域的一个重要研究领域。它涉及估计人体上的独特点,也称为关键点。在这篇博文中,我们将讨论一种在包含人类的图像上查找关键点的算法,称为Keypoint-RCNN。该代码是使用 Pytorch 使用Torchvision库编写的。 假设您想要建立一名私人健身教练,可以通…...

Dubbo及Zookeeper安装

...

ZK-C3595、ZK-C35100、ZK-C40100、ZK-C40110超越离合器

ZK-A3072、ZK-A3080、ZK-A4090、ZK-A3595、ZK-A35100ZK-A40100、ZK-A40110、ZK-A3072、ZK-C3080、ZK-C4090、ZK-C3595、ZK-C35100、ZK-C40100、ZK-C40110单向离合器(超越离合器) MG300M1300MG400、M1400MG500、M1500MG600、M1600MG700、M1700MG750、M1750MG800、M1800MG900、M1…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...