1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 小程序 下拉刷新 上拉触底加载数据

小程序 下拉刷新 上拉触底加载数据

时间:2021-02-08 03:34:19

相关推荐

小程序 下拉刷新 上拉触底加载数据

1. 下拉刷新

下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefresh」函数,所以没注意的同学会发现我写了「onPullDownRefresh」函数,但是没起作用的情况

当然我们最先要做的是开启此功能,在「app.json」文件「window」对象中加入

"enablePullDownRefresh": true

或者在页面对应的JSON文件中加入这个配置,例如我「list」目录下wxml对应的JSON文件就是「list.json」或者「index,json」

可以通过「wx.startPullDownRefresh」触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一样

当处理完数据刷新后,「wx.stopPullDownRefresh」可以停止当前页面的刷新

最后使用方法如下:

getData: function() {wx.cloud.callFunction({name: '',data: {type: 'get'},success: function(res) {.......// 停止下拉动作wx.stopPullDownRefresh();},fail: function() {}})}/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {this.getData(); // 这里写自己要调用的查询方法},

PS: 如果大家看不到动画,在「app.json」「window」对象中添加如下:

"backgroundTextStyle": "dark"

2. 上拉触底-加载更多数据

上拉触底用到「onReachBottom」函数,直接上代码:

/*** 上拉触底*/onReachBottom: function () {this.setData({curPage: this.data.curPage+1 // 一般上拉触底是为了加载更多分页数据,所以这里页数自增});this.getGoodsList(this.data.activeCategoryId, true) // 查询方法},

可以在「app.json」中的「window」对象下设置触发距离:

"onReachBottomDistance":50

在触发距离内滑动期间,本事件只会触发一次

小程序,附带源码,相互学习

定制属于你自己的婚礼邀请函,源码,扫描直接体验

私人影剧院,电影观影指南,源码,扫码直接体验

需要入群交流的,可以加我微信: bjawenfd ,纯粹交流群互粉群

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。