微信小程序|5.微信小程序 - 下拉刷新/上拉加载小程序|微信小程序

开启配置
.json文件中加入配置

//shoplist.json"onReachBottomDistance": 200, "enablePullDownRefresh": true,

data: { query: {}, shopList: [], page: 1, pageSize: 10, total: 0, isloading: false },/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ query: options }) this.getShopList() },// 以分页的形式获取商铺列表数据的方法 getShopList(cb) { this.setData({ isloading: true }) // 展示 loading 效果 wx.showLoading({ title: '数据加载中...' })wx.request({ url: `https://www.escook.cn/categories/${this.data.query.id}/shops`, method: 'GET', data: { _page: this.data.page, _limit: this.data.pageSize }, success: (res) => { this.setData({ shopList: [...this.data.shopList, ...res.data], total: res.header['X-Total-Count'] - 0 }) }, complete: () => { // 隐藏 loading 效果 wx.hideLoading() this.setData({ isloading: false }) // wx.stopPullDownRefresh() cb && cb() } }) }

{{item.name}} 电话：{{tools.splitPhone(item.phone)}} 地址：{{item.address}} 营业时间：{{item.businessHours}}

下拉刷新

onPullDownRefresh: function () { // 需要重置关键的数据 this.setData({ page: 1, shopList: [], total: 0 }) // 重新发起数据请求 this.getShopList(() => { wx.stopPullDownRefresh() }) }

上拉加载

onReachBottom: function () { if (this.data.page * this.data.pageSize >= this.data.total) { // 证明没有下一页的数据了 return wx.showToast({ title: '数据加载完毕！', icon: 'none' }) } // 判断是否正在加载其他数据 if (this.data.isloading) return // 页码值 +1 this.setData({ page: this.data.page + 1 })// 获取下一页数据 this.getShopList() }

【微信小程序|5.微信小程序 - 下拉刷新/上拉加载】