下拉刷新
全局开启下拉刷新:可以在app.json的Window节点中,enablePullDownRefresh:true
局部开启下拉刷新:可以再页面的json里面写enablePullDownRefresh:true
配置下拉刷新窗口样式
backgroundTextStyle:dark 下拉的loading 效果
backgroundColor :窗口的背景颜色
监听下拉刷新事件
通过onPullDownRefresh()监听用户下拉事件
停止下拉刷新动作
在监听用户下拉刷新事件写:wx.stopPullDownRefresh()
上拉加载
步骤
1.
全局配置: onReachBottomDistance:60
局部配置:onReachBottomDistance:60
2.
监听页面的上拉触底事件
在页面js里面找到页面上拉的处理函数
onReachBottom() {
console.log("触发了上拉触底事件")
},
3.
上拉触底案例
定义获取随机颜色的方法
getColors(){
wx.request({
url: 'https://www.escook.cn/api/color',
method:'GET',
success:(data)=>{
console.log(data.data.data)
this.setData({
colorList:data.data.data
})
}
})
},
在页面加载时获取初始化数据
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this. getColors()
},
渲染页面结构 美化效果
在wxml页面写
<view class="box" wx:for="{{colorList}}" wx:key="*this" style="background-color:rgb({{item}}) ;">{{item}}</view>
上拉触底时调用获取随机颜色的方法
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("触发了上拉触底事件")
调用方法
this.getColors()
},
// 1定义获取随机颜色的方法
getColors(){
wx.request({
url: 'https://www.escook.cn/api/color',
method:'GET',
success:(data)=>{
console.log(data.data.data)
this.setData({
colorList:[...this.data.colorList,...data.data.data]
})
}
})
},