微信小程序简单实现上拉触底onReachBottom数据分页请求

实现思路：
- 通过小程序上拉触底onReachBottom事件触发数据第二次请求，上拉触底一次请求分页页码加一，每次请求10条数据，在请求函数中通过函数concat来处理数据累加问题，common.WechatRequest为封装的小程序wx.request函数。
- 页面结构

<view hidden="{{noDataPrompt}}">{{promptText}}
</view>
<view wx:for="{{inquiryDatas}}" wx:key="{{index}}"></view>

主要实现代码如下：

Page({/*** 页面的初始数据*/data: {inquiryDatas: [],noDataPrompt: true,promptText: '无记录',pageCurrent: 1,pageSize: ''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that = this;that.getTestData(1, 10, id, false);},/*** 获取记录*/getTestData: function (pages, sizes, userIds, flag) {let that = this;let url = '接口地址';let header = { 'Authorization': 'Bearer ' + token, 'content-type': 'application/x-www-form-urlencoded' };let data = { 'pageNo': pages, 'pageSize': sizes, 'userId': userIds };common.WechatRequest(url, data, header, 'POST', 'json', 'text', res => {if (res.data.code == 200) {let inquiryArr = res.data.data.records;if (inquiryArr.length > 0) {if (flag){that.setData({noDataPrompt: true,pageSize: res.data.data.pages,inquiryDatas: that.data.inquiryDatas.concat(inquiryArr)})} else {that.setData({noDataPrompt: true,pageSize: res.data.data.pages,inquiryDatas: inquiryArr})}} else {that.setData({noDataPrompt: false})}} else {common.showToast('记录加载失败');}wx.hideLoading();}, null, null);},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {let that = this;let pageNo = that.data.pageCurrent + 1;let pageSize = that.data.pageSize;that.setData({pageCurrent: pageNo})if (pageNo > pageSize) {wx.showToast({title: '无更多数据',icon: 'none'});} else {that.getTestData(pageNo, 10, id, true);}},})

微信小程序简单实现上拉触底onReachBottom数据分页请求相关推荐

微信小程序分页功能（上拉触底事件）
js核心代码 Page({data: {// 前台显示listshowlist: [],// 当前页pageNumber: 1,// 总页数totalPage: 1,},onLoad: functio ...
微信小程序如何实现上拉加载更多数据?
思路:在下拉到页面的时候我们可以进行数据请求,请求到在上次加载完毕的后五条数据 (举个例子),通过page(页码),count(加载数据得条数)与start进行联接,我们可以发现:start:(pag ...
【微信小程序】实现上拉加载更多
小程序上拉加载更多首先我们得运用到小程序的往下拉触底事件,如下图所示代码量很少,方便理解,主要还是要有逻辑,也不说废话了直接上代码吧 data: {paging:5//显示几条内容}onReach ...
微信小程序如何实现上拉刷新（即分页加载数据）？
步骤1. enablePullDownRefresh这个属性设置为true.enablePullDownRefresh可以写在app.json 中和页面的xx.json,两者的区别是, app.j ...
小程序下拉刷新上拉触底加载数据
1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefres ...
微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包
目录一.头像上传 1.选择图片 wx.chooseImage() 2.上传文件 wx.uploadFile() 二.瀑布流+下拉刷新+触底加载三.分包加载什么是分包为什么要使用分包如 ...
微信小程序页面事件 - 下拉刷新与上拉触底
一.下拉刷新 1.概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为. 2. 启用下拉刷新启用下拉刷新有两种方式: ①全局开启下拉刷新在 app.j ...
【微信小程序】-—下拉刷新、上拉触底事件详细讲解
1.页面事件–下拉刷新事件 1.1什么是下拉刷新下拉式移动端的专有名词,指的是通过手指子在屏幕上的下拉滑动操作,从而重新加载页面数据 2.启动下拉刷新 (1)方法一:全局开启下拉刷新在app.js ...
微信小程序上拉触底案例添加loading效果
在上拉触底的时候如何添加小程序的loading效果呢??就是左边现实的效果.有一个转动的圈圈首先我们打开.js文件在原有的请求颜色的基础上添加wx.showLoading getColors(){ ...

微信小程序简单实现上拉触底onReachBottom数据分页请求

微信小程序简单实现上拉触底onReachBottom数据分页请求相关推荐

最新文章

热门文章