2.3. 配置上拉触底距离
上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。
3. 上拉触底案例
3.1. 案例效果展示
3.2. 案例的实现步骤
- 定义获取随机颜色的方法
- 在页面加载时获取初始数据
- 渲染 UI 结构并美化页面效果
- 在上拉触底时调用获取随机颜色的方法
- 添加 loading 提示效果
- 对上拉触底进行节流处理
3.3.
步骤1 - 定义获取随机颜色的方法
// pages/home/home.js Page({ data: { colorList: [] }, getColor() { wx.request({ url: 'https://www.escook.cn/api/color', method: 'GET', success: ({ data: res })=>{ this.setData( { colorList: [...this.data.colorList, ...res.data] } ) } }) } })
步骤2 - 在页面加载时获取初始数据
// pages/home/home.js Page({ data: { colorList: [] }, getColor() { wx.request({ url: 'https://www.escook.cn/api/color', method: 'GET', success: ({ data: res })=>{ this.setData( { colorList: [...this.data.colorList, ...res.data] } ) } }) }, onLoad() { this.getColor() } })
步骤3 - 渲染 UI 结构并美化页面效果
<!--pages/home/home.wxml--> <text>pages/home/home.wxml</text> <view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});" > {{item}} </view>
/* pages/home/home.wxss */ .num-item { border: solid 1px black; height: 50px; margin: 5px; }
步骤4 - 上拉触底时获取随机颜色
// pages/home/home.js Page({ data: { colorList: [] }, getColor() { wx.request({ url: 'https://www.escook.cn/api/color', method: 'GET', success: ({ data: res })=>{ this.setData( { colorList: [...this.data.colorList, ...res.data] } ) } }) }, onLoad() { this.getColor() }, // 下拉触底 onReachBottom() { this.getColor() } })
步骤5 - 添加 loading 提示效果
// pages/home/home.js Page({ data: { colorList: [] }, getColor() { // loading wx.showLoading({ title: '数据加载中...' }) wx.request({ url: 'https://www.escook.cn/api/color', method: 'GET', success: ({ data: res })=>{ this.setData( { colorList: [...this.data.colorList, ...res.data] } ) }, // 请求完成 complete: ()=>{ wx.hideLoading() } }) }, onLoad() { this.getColor() }, onReachBottom() { this.getColor() } })
步骤6 - 对上拉触底进行节流处理
- 在 data 中定义 isloading 节流阀
false 表示当前没有进行任何数据请求
true 表示当前正在进行数据请求 - 在 getColors() 方法中修改 isloading 节流阀的值
在刚调用 getColors 时将节流阀设置 true
在网络请求的 complete 回调函数中，将节流阀重置为 false - 在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制
如果节流阀的值为 true，则阻止当前请求
如果节流阀的值为 false，则发起数据请求
// pages/home/home.js Page({ data: { colorList: [], // 节流 isLoading: false }, getColor() { // loading // 节流 if ( this.data.isLoading ) return // 节流 this.setData( { isLoading: true } ) wx.showLoading({ title: '数据加载中...' }) wx.request({ url: 'https://www.escook.cn/api/color', method: 'GET', success: ({ data: res })=>{ this.setData( { colorList: [...this.data.colorList, ...res.data] } ) }, // 请求完成 complete: ()=>{ wx.hideLoading() // 节流 this.setData( { isLoading: false } ) } }) }, onLoad() { this.getColor() }, onReachBottom() { this.getColor() } })
拓展
