微信小程序实现触底加载
作者:与黑夜为伍 时间:2024-04-23 09:30:21
现在来看小程序还没有使用pc端的那种分页格式,现在微信小程序上分页一般使用触底加载来实现分页的,下面就来分享一个触底加载的实现方式。
1.首先要从后端也就是服务器上获取分页的数据,如:每页多少条数据,一共分了多少页,大致内容如下图
既然有了数据,那就要在微信端去获取数据了
2.先不考虑分页,把获取到的数据直接显示到微信端
// pages/test/test.js
//引入封装请求路径的模块
const orderApi = require('../../api/order')
//设置当前页数和总页数
var nowPage = 2;
var totalPage;
Page({
/**
* 页面的初始数据
*/
data: {
waitOrder:[]
},
tapPaying: function (options) {
//初始化
nowPage = 2
//查询的方法把查询路径统一封装在orderApi,userOrder是封装的路径名
//status: "wait", merchant: wx.getStorageSync('user').mId 是参数
orderApi.userOrder({ status: "wait", merchant: wx.getStorageSync('user').mId }).then((res) => {
console.log(res)
//获取总页数
totalPage = res.data.totalPages
this.setData({
//把查询到的值赋给数组
waitOrder: res.data
})
}).catch((err) => {
console.log(err)
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.tapPaying()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
})
3.wxml文件
<!--pages/test/test.wxml-->
<view class="name" wx:for="{{waitOrder}}" wx:for-key="index" wx:for-item="ev">
{{ev.customerName}}
{{waitOrder.length}}
</view>
xcss样式就省略
4.前端显示如下:
5.写触底函数的方法
loadOtherWaitOrder() {
if(nowPage <= totalPage){
orderApi.userOrder({
status: "wait",
merchant: wx.getStorageSync('user').mId,
page:nowPage,
}).then((res) => {
//每次执行自加1
nowPage += 1
let waitOrder = res.data.content
let oldWaitOrder = this.data.waitOrder
//把获取的新数组和旧的数组合并在一起
oldWaitOrder = oldWaitOrder.concat(waitOrder)
this.setData({
waitOrder: oldWaitOrder
})
}).catch((err) => {
console.log(err)
})
}
},
6.把写的触底函数的方法放入到onReachBottom: function () {} 页面上拉触底事件的处理函数中。
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.loadOtherWaitOrder()
},
7.现在在触底显示
到此微信小程序触底加载实现完成。
来源:https://blog.csdn.net/javaasd/article/details/108402884
标签:微信小程序,触底加载
0
投稿
猜你喜欢
Mysql存储引擎MyISAM的常见问题(表损坏、无法访问、磁盘空间不足)
2024-01-14 22:07:53
sql server性能调优 I/O开销的深入解析
2024-01-19 05:17:57
PHP+JS实现文件分块上传的示例代码
2023-06-12 00:04:07
Python趣味挑战之教你用pygame画进度条
2022-08-13 15:02:49
python复制文件到指定目录的实例
2021-03-17 17:10:26
Python读csv文件去掉一列后再写入新的文件实例
2022-05-13 14:04:12
解决IE中长按钮的显示问题
2008-06-24 12:06:00
python之如何查找多层嵌套字典的值
2021-12-05 08:57:07
CSS资料中常见英语词语翻译整理
2008-08-29 12:50:00
python内置函数之eval函数详解
2022-07-22 12:39:29
python使用信号量动态更新配置文件的操作
2023-02-25 08:43:18
Python Ruby 等语言弃用自增运算符原因剖析
2022-10-11 07:42:31
sql server vs10安装之后一些列问题
2012-01-05 19:22:41
全面解读Python Web开发框架Django
2022-06-24 19:41:45
Python容器类型转换的3种方法实例
2022-06-03 13:32:32
简单实现python数独游戏
2023-06-21 15:24:22
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2021-11-17 02:14:33
Python调用scp向服务器上传文件示例
2023-12-09 18:56:34
浅谈Tensorflow 动态双向RNN的输出问题
2022-10-16 21:30:35
关于Vue3过渡动画的踩坑记录
2024-06-07 16:03:35