页面事件
下拉刷新事件
1、什么是下拉刷新
下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
2、启用下拉刷新
启用下拉刷新有两种方式：
3、配置下拉刷新窗口的样式
- backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
- backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light
4、监听页面的下拉刷新事件
5、停止下拉刷新的效果
上拉触底事件
1、什么是上拉触底
2、监听页面的上拉触底事件
3、 配置上拉触底距离
如 👇
onReachBottomDistance ：150
上拉触底小练习
1、案例效果展示
2、案例的实现步骤
〇 模拟数据data结构
data: { colorList:[], colorArr:[ `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt(Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt(Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt(Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt(Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt(Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt(Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt(Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt(Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt(Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt(Math.random()*100)}`, ]
① 定义获取随机颜色的方法
//获取颜色数据getColorValue(){ this.setData({ colorList:[...this.data.colorList,...this.data.colorArr], }) //打印数据console.log(this.data.colorList); },
② 在页面加载时获取初始数据
/***生命周期函数--监听页面加载*/onLoad(options) { this.getColorValue(); },
③ WXML及WXSS & 渲染 UI 结构并美化页面效果
WXML
<viewwx:for="{{colorList}}"wx:key="index"class="colorArr"style="background-color: rgba({{item}});">{{item}}</view>
.colorArr{ border: 1rpxsolidred; border-radius: 8rpx; line-height: 200rpx; margin: 15rpx; text-align: center; text-shadow: 0rpx,0rpx,5rpx,red; box-shadow: 3rpx,3rpx,8rpx,red; }
④ 在上拉触底时调用获取随机颜色的方法
/***页面上拉触底事件的处理函数*/onReachBottom() { //模拟效果setTimeout(()=>{ //重新加载数据this.getColorValue(); },1000) },
⑤ 添加 loading 提示效果
/***页面上拉触底事件的处理函数*/onReachBottom() { //显示加载效果wx.showLoading({ title: '加载中...', }) //模拟效果setTimeout(()=>{ //隐藏加载效果wx.hideLoading({}) //重新加载数据this.getColorValue(); },1000) },
⑥ 对上拉触底进行简单处理节流处理（这里没有使用节流阀直接使用了定时器处理了）
- false 表示当前没有进行任何数据请求
- true 表示当前正在进行数据请求
- 在刚调用 getColors 时将节流阀设置 true
- 在网络请求的 complete 回调函数中，将节流阀重置为 false
- 如果节流阀的值为 true，则阻止当前请求
- 如果节流阀的值为 false，则发起数据请求
添加编译模式
说明：添加了自定义编译模式可以一开始编译时就会自动跳到编译的页面
添加如 👇
最后
下篇文章再见ヾ(￣▽￣)ByeBye
