微信小程序开发系列
前言
在微信小程序开发中经常遇到分页列表需要滚动到底部之后进行请求数据更新，下面介绍如何进行触底更新分页展示。使用到页面上拉触底事件的处理函数onReachBottom。
一、上拉触底事件函数onReachBottom
监听用户上拉触底事件，可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。
代码：
page.js
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
app.json文章来源：https://www.toymoban.com/news/detail-743153.html
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "练习",
"navigationBarTextStyle": "black",
"onReachBottomDistance": 100
},
设置不同onReachBottomDistance的值，当滚动到不同位置时就会触发，单位是px。文章来源地址https://www.toymoban.com/news/detail-743153.html
二、实现
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() {
}
})
到了这里，关于【微信小程序】列表滚动触底更新实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
