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

微信小程序开发系列


目录

  • 前言
  • 一、上拉触底事件函数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() {}
})

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

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

相关文章

CAPL通过lookupSignal和DBLookup获取DBC信号的属性信息

文章目录 演示CAPL通过lookupSignal和DBLookup获取DBC信号的属性信息lookupSignalDBLookup代码问题:DBLookup(信号名).AttributeName报错问题: motorola格式的信号使用DBLookup获取信号的bitstart跟ig模块里的信息不一样演示 CAPL通过lookupSignal和DBLookup获取DBC信号的属性…

奥威BI数据可视化工具:360度呈现数据,告别枯燥表格

随着企业数据量的不断增加&#xff0c;如何有效地进行数据分析与决策变得越来越重要。奥威BI数据可视化工具作为一款强大的数据分析工具&#xff0c;在帮助企业深入挖掘数据价值方面具有显著优势。 奥威BI数据可视化工具是一款基于数据仓库技术的数据分析工具&#xff0c;具有…

磁盘满了怎么办?实用小技巧,做不做测试都非常好用!

♥ 前 言 工作了多年的测试&#xff0c;应该多少都会遇到磁盘空间不够的情况&#xff0c;比方你现在正在用的测试环境&#xff0c;因为要测试&#xff0c;所以&#xff0c;项目一直启动&#xff0c;那么就会一直在写日志&#xff0c;如果不定期清理日志&#xff0c;随着时间…

企望制造ERP系统 RCE漏洞[2023-HW]

企望制造ERP系统 RCE漏洞 一、 产品简介二、 漏洞概述三、 复现环境四、 漏洞复现小龙POC检测 五、 修复建议 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;…

ES6 Promise/Async/Await使用

Promise应用 在工作中, 我们经常会遇到用异步请求数据, 查询一个结果, 然后把返回的参数放入到下一个执行的异步函数像这样: $.ajax({..., success(resp)>{$.ajax({..., resp.id, success(resp)>{$.ajax({..., resp.name success(resp)>{//多层嵌套的情况, 看着是不…

【MySQL】如何使用Named Pipe协议(Windows)连接MySQL数据库

文章目录 【MySQL】如何使用Named Pipe协议(Windows)连接MySQL数据库连接MySQL的协议使用Named Pipe协议(Windows)连接MySQL步骤1&#xff1a;确认MySQL服务器已启用Named Pipe连接启动Named Pipe连接方法 步骤2&#xff1a;客户端使用Named Pipe连接MySQL服务器。例1&#xff…

阿里网盘海外使用速度很慢

小虎最近在HK使用阿里云盘&#xff0c;速度突然变得很慢&#xff0c;但是百度的没问题。查了发现是阿里的DNS做的不好&#xff0c;所以换了一个DNS速度就上来了。 解决方案 在这个网站&#xff1a;[原创工具] DNS优选(挑选最合适的DNS服务器,拒绝DNS劫下载DNS推荐工具&#x…

将iPhone备份到移动硬盘

文章目录 将iPhone备份到移动硬盘如何在 MacOS 上查找当前备份如何在 MacOS 上查找当前备份如何将 iPhone 备份移至外部硬盘如何永久更改 Mac系统 保存 iPhone 备份的位置更新 Mac 上的权限更改 iPhone 备份位置如何验证新的 iPhone 备份已经生效?将iPhone备份到移动硬盘 如果…

jsp本质-servlet

jsp本质-servlet 一、jsp文件 <% page language"java" contentType"text/html; charsetUTF-8" pageEncoding"UTF-8"%> <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>JSP Example…

[国产MCU]-W801开发实例-开发环境搭建

W801开发环境搭建 文章目录 W801开发环境搭建1、W801芯片介绍2、W801芯片特性3、W801芯片结构4、开发环境搭建1、W801芯片介绍 W801芯片是联盛德微电子推出的一款高性价比物联网芯片。 W801 芯片是一款安全 IoT Wi-Fi/蓝牙 双模 SoC芯片。芯片提供丰富的数字功能接口。支持2.…

Redis常用指令

Redis特点 Redis是一个高性能key/value内存型数据库&#xff0c;在redis中&#xff0c;所有的数据形式都是以键值对的方式来存储的 Redis支持丰富的数据类型 string、list、set、sorted set 指的键值对中值的类型 Redis支持持久化&#xff0c;将内存的数据存储到硬盘里面 Redis…

听GPT 讲Prometheus源代码--util

Prometheus的util目录包含了一些通用的工具模块,主要包含以下文件: buckets.go 这个文件定义了一些常用的指标采样值范围(Quantile buckets),如:0.001,0.01,0.05,0.5,0.9,0.95,0.99,0.999等。这些buckets常用于计算指标的分位数线。 regex.go 这个文件定义了一些正则表达式匹配…

阿里云2核4G服务器配置汇总表_轻量和ECS

阿里云2核4G服务器配置价格表&#xff0c;297元一年&#xff0c;配置为轻量应用服务器2核4G、4M带宽、60GB高效云盘&#xff0c;折合24元一个月。 目录 2核4G服务器轻量&#xff1a; 2核4G服务器ECS 关于轻量和ECS的区别&#xff1a; 2核4G服务器轻量&#xff1a; 云服务器…

JVM学习笔记(一)

1. JVM快速入门 从面试开始&#xff1a; 请谈谈你对JVM 的理解&#xff1f;java8 的虚拟机有什么更新&#xff1f; 什么是OOM &#xff1f;什么是StackOverflowError&#xff1f;有哪些方法分析&#xff1f; JVM 的常用参数调优你知道哪些&#xff1f; 内存快照抓取和MAT分…

verilog学习笔记6——锁存器和触发器

文章目录 前言一、锁存器1、基本SR锁存器——或非门实现2、基本SR锁存器——与非门实现3、门控SR锁存器4、门控D锁存器 二、触发器1、 电平触发的RS触发器/同步SR触发器2、电平触发的D触发器/D型锁存器3、边沿触发的D触发器4、脉冲触发的RS触发器 三、边沿触发、脉冲触发、电平…

OpenCV基础知识(6)— 滤波器

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。在尽量保留原图像信息的情况下&#xff0c;去除图像内噪声、降低细节层次信息等一系列过程&#xff0c;被叫做图像的平滑处理&#xff08;或者叫图像的模糊处理&#xff09;。实现平滑处理最常用的工具就是滤波器。通过调节…

深入浅出Pytorch函数——torch.nn.init.xavier_normal_

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…

【数据分析入门】Matplotlib

目录 零、图形解析与工作流0.1 图形解析0.2 工作流 一、准备数据1.1 一维数据1.2 二维数据或图片 二、绘制图形2.1 画布2.2 坐标轴 三、绘图例程3.1 一维数据3.2 向量场3.3 数据分布3.4 二维数据或图片 四、自定义图形4.1 颜色、色条与色彩表4.2 标记4.3 线型4.4 文本与标注4.5…

ui设计师工作总结及计划范文模板

ui设计师工作总结及计划范文模板【篇一】 白驹过隙&#xff0c;转眼间某某年已近结尾&#xff0c;时间伴随着我们的脚步急驰而去&#xff0c;到了个人工作总结的时候&#xff0c;蓦然回首&#xff0c;才发现过去的一年不还能画上圆满的句号&#xff0c;内心感慨万千&#xff0c…

11. 实现业务功能--获取用户信息

目录 1. 实现 Controller 2. 单体测试 3. 修复返回值存在的缺陷 3.1 用户的隐私数据&#xff1a;密码的密文和盐不能显示 3.2 将值为 null 的字段可以进行过滤 3.3 时间的格式需要进行处理&#xff0c;如 yyyy-mmmm-ddd HH:mm:ss 3.4 data 属性没有返回 4. 实现前端页…