一、下拉刷新
1.开启和配置
小程序中开启下拉刷新的方式有两种:
①全局开启下来刷新
在app.json的window节点中,设置enablePullDownRefresh设为ture。
②局部开启下来刷新
在页面对应的json文件的的window节点中,设置enablePullDownRefresh设为ture。
还可以通过设置backgroundColor和backgroundTextStyle来配置下拉窗口的颜色的loading样式。
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle":"dark"
2.监听新事件
在对应页面的js文件中使用**onPullDownRefresh()**进行监听。
<view>下拉次数{{Timer}}</view>
onPullDownRefresh() {
this.setData({Timer:this.data.Timer+1});
wx.stopPullDownRefresh(); //处理完成,停止下拉刷新效果
},
二、上拉触底
1.触底监听
在页面的js文件中使用**onReachBottom()**进行监听
onReachBottom() {
this.setData({More:this.data.More+1});
},
需要注意的是,使用这个事件需要页面可以向下滑动(即存在列表或页面长于手机屏幕)
通过onReachBottomDistance来配置上拉触底的行程(默认50px)。
2.请求节流
如果在短时间内触底多次,会造成多次请求数据,所以需要在输出处理过程中对请求进行节流。
思路是设置一个标志位isloading,在监听的处理函数中检查这个标志位,并在处理完成后将标志位复位,在复位之前不再响应下拉。
三、Loading效果
loading效果不属于页面事件,但是多与页面事件联用,故也放在这里。
loading框需要使用wx.showLoading()函数显示调用,并使用wx.hideLoading()函数隐藏
wx.showLoading({title:'数据加载中...'}) //唤起loading
wx.hideloading() //隐藏loading