小程序，上拉触底事件

上拉触底事件

1. 什么是上拉触底

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

2. 监听页面的上拉触底事件

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

// 页面上拉触底事件的处理函数
onReachBottom: function () {
  console.log('触发了上拉触底的事件');
}

3. 配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。

示例代码如下：

{
  "navigationBarTitleText": "示例页面",
  "onReachBottomDistance": 100 // 设置触底距离为 100px
}

4. 示例代码

为了更好的理解上拉触底事件的使用，下面是一个使用上拉触底事件加载更多数据的示例代码。

HTML

<view class="list">
  <view wx:for="{{items}}">
    {{item}}
  </view>
</view>

JS

Page({
  data: {
    items: []
  },
  onReachBottom: function() {
    // 模拟异步加载数据
    setTimeout(() => {
      var newItems = [];
      for (var i = 0; i < 10; i++) {
        newItems.push('加载的数据' + (this.data.items.length + i + 1));
      }
      this.setData({
        items: this.data.items.concat(newItems)
      });
    }, 1000);
  }
})

CSS

.list {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #666;
}