1、下拉刷新获取数据enablePullDownRefresh
开启下拉刷新:
enablePullDownRefresh | boolean | false | 是否开启当前页面下拉刷新 |
案例:
下拉刷新,获取新的列表数据,其实就是进行一次新的网络请求:
第一步:在.json文件中开启下拉刷新
{"usingComponents": {},"enablePullDownRefresh":true,"backgroundColor": "#6D9AD6"}
第二步:在.js配置文件中找到下拉刷新处理函数:
// pages/wxRequest/wxRequest.js
Page({/*** 页面的初始数据*/data: {listArr:[]},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getData();},getData(){wx.showLoading({title: '网络加载中...',mask:true//遮罩层,防止用户误触})wx.request({url: 'https://api.thecatapi.com/v1/images/search?limit=2',success:res=>{console.log(res)this.setData({listArr:res.data})//当网络请求完成后,我们要自动的把下拉刷新的样式关闭掉,要不然不好看:wx.stopPullDownRefresh() },complete:res=>{//无论网络请求是否成功,都要关闭loading样式:wx.hideLoading()}})},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {this.setData({//细节:其实我们下拉刷新后,应该先把页面清空,再获取新的数据://只不过页面清空效果很快,肉眼看不太出来listArr:[] })this.getData();},
细节一:当网络请求完成后,我们要自动的把下拉刷新的样式关闭掉,要不然不好看:
- wx.stopPullDownRefresh(Object object):停止当前页面下拉刷新;
- wx.startPullDownRefresh(Object object):开始下拉刷新。调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {//细节:其实我们下拉刷新后,应该先把页面清空,再获取新的数据://只不过页面清空效果很快,肉眼看不太出来this.setData({listArr:[] })this.getData();},
细节二:在页面加载完毕前,应该添加一个wx.showLoading()提示用户正在加载,网络请求完成后,就关闭这个加载动作
getData(){wx.showLoading({title: '网络加载中...',mask:true//遮罩层,防止用户误触})wx.request({url: 'https://api.thecatapi.com/v1/images/search?limit=2',success:res=>{console.log(res)this.setData({listArr:res.data})//当网络请求完成后,我们要自动的把下拉刷新的样式关闭掉,要不然不好看:wx.stopPullDownRefresh() //当网络请求完成后,还要关闭loading样式:wx.hideLoading()}})},
细节三:如果网络请求失败呢?例如接口失效:
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
getData(){wx.showLoading({title: '网络加载中...',mask:true//遮罩层,防止用户误触})wx.request({url: 'https://api.thecatapi.com/v1/images/search?limit=2',success:res=>{console.log(res)this.setData({listArr:res.data})//当网络请求完成后,我们要自动的把下拉刷新的样式关闭掉,要不然不好看:wx.stopPullDownRefresh() },complete:res=>{//无论网络请求是否成功,都要关闭loading样式:wx.hideLoading()}})},
2、触底加载更多的数据onReachBottom
在js中找到触底事件对应的处理函数:
/*** 页面上拉触底事件的处理函数*/onReachBottom() {},
距离底部多少的时候触发我们的触底事件 默认是50px