下拉刷新
手指在屏幕上下拉滑动操作,实现页面重新加载
1.启动下拉刷新
全局配置 在app.json文件中的window中开启下拉刷新 enablePullDownRefresh:true
局部配置 在页面的.json文件中开启下拉刷新 enablePullDownRefresh:true
2.配置下拉刷新窗口样式
backgroundTypeStyle:dark 下拉的loading效果
backgroundColor 下拉的窗口效果
3.监听下拉刷新事件
通过onPullDownRefresh()监听用户下拉事件
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
4.停止下拉刷新动作
数据设置成功后,调用改函数,关闭下拉刷新动作
wx.stopPullDownRefresh()
上拉加载
手指在屏幕上上拉滑动动作,加载更多数据
1.在全局或者局部配置上拉触底的动作
配置上拉触底的距离 onReachBottomDistance : 60
2.监听页面上拉触底事件
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("触发了上拉触底事件")
},
上拉触底案例
1.定义获取随机颜色的方法
2.在页面加载时获取初始化数据
3.渲染页面解构,美化页面
4.上拉触底时调用获取随机颜色的方法
5.添加loading提示效果
定义获取随机颜色的方法
data:{
colors:[]
},
getColors() {
wx.request({
url: 'https://www.escook.cn/api/color', //随机颜色地址
method:'GET',
success:(res)=>{
this.setData({
//将获取到的随机颜色的数据赋值给colors数组
colors:res.data.data
})
},
})
},
在页面加载时获取初始化数据
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getColors()
},
渲染页面解构,美化页面
<view wx:for="{{colors}}" wx:key="*this" class="box"
style="background:rgb({{item}});">{{item}}</view>
上拉触底时调用获取随机颜色的方法
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.getColors()
},
上拉触底时获取的新数据和旧数据进行合并
getColors() {
wx.request({
url: 'https://www.escook.cn/api/color',
method:'GET',
success:(res)=>{
this.setData({
//this.data.colors 旧数据 res.data.data下拉触底的新数据
colors:[...this.data.colors,...res.data.data]
})
},
})
},
添加loading提示效果
getColors() {
//开始加载
wx.showLoading({
title: '数据正在加载中',
})
wx.request({
url: 'https://www.escook.cn/api/color',
method:'GET',
success:(res)=>{
this.setData({
colors:[...this.data.colors,...res.data.data]
})
},
// 请求完成后 不管成功失败 关闭loading加载
complete:()=>{
wx.hideLoading()
}
})
},