台州网站建设公司,装饰工程 技术支持 东莞网站建设,营销型企业网站 网络服务,php主机网站微信小程序开发系列 目录 前言一、上拉触底事件函数onReachBottom二、实现 前言
在微信小程序开发中经常遇到分页列表需要滚动到底部之后进行请求数据更新#xff0c;下面介绍如何进行触底更新分页展示。使用到页面上拉触底事件的处理函数onReachBottom。 一、上拉触底事件函…微信小程序开发系列 目录 前言一、上拉触底事件函数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() {}
})
