微信小程序上拉触底事件

一、什么是上拉触底事件

上���触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

二、监听上拉触底事件

在页面的.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件。

三、配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。

小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。

四、微信小程序上拉触底案例

1. 页面效果

2. 实现步骤

1. 定义获取随机颜色的方法
2. 在页面加载时初始化数据
3. 渲染UI结构并且美化页面效果
4. 在上拉触底时调用获取随机颜色的方法
5. 添加loading提示效果
6. 对上拉触底进行节流处理

3. 具体实现

1. 定义获取随机颜色的方法

  getColors() {    wx.request({      url: 'https://applet-base-api-t.itheima.net/api/color',      method: 'GET',      success: ( {data:res})=>{       //  console.log(res.data);        this.setData({          colorList: this.data.colorList.concat(res.data)        })        console.log(this.data.colorList);             },    });  },

1. 在页面加载时初始化数据

onLoad(options) {   this.getColors();  },

1. 渲染UI结构并且美化页面效果