scroll-view滚动到最底部加载数据

### 实现 `scroll-view` 滚动到底部时自动加载更多数据

为了实现在 `scroll-view` 组件滚动到底部时触发数据加载的功能，可以通过监听用户的滚动事件来判断是否已经到达底部。一旦检测到接近或达到底部，则发起新的数据请求并更新视图。

#### WXML 结构定义
首先，在WXML文件中设置带有垂直方向滚动属性的 `scroll-view` 容器，并绑定相应的事件处理函数：

<view class="container">
  <scroll-view 
    scroll-y="true"
    bindscrolltolower="loadMoreData" <!-- 添加此行 -->
    lower-threshold="50">           <!-- 可选参数, 设置距离底部多远开始触发 -->
    
    <block wx:for="{{items}}" wx:key="index">
      <view class="item">{{item}}</view>
    </block>

  </scroll-view>
</view>

这里使用了 `bindscrolltolower` 属性来指定当用户滚动至容器底端附近时调用的方法名 `loadMoreData`；同时还可以通过配置 `lower-threshold` 来调整触发加载前的距离阈值[^1]。

#### JS逻辑编写
接着，在对应的JS文件内实现上述提到的数据加载方法:

Page({
  data: {
    items: [], // 存储展示项数组
    loading: false,
    hasMore: true,
    page: 1,
    pageSize: 10
  },

  onLoad() {
    this.fetchData();
  },
  
  fetchData(callback){
    const {page,pageSize} = this.data;
    let newData = [];
    for(let i=0;i<pageSize;i++){
        newData.push(`Item ${(page-1)*pageSize+i+1}`);
    }
    setTimeout(() => {
      if (callback) callback(newData);
    }, 1000); //模拟网络延迟
  },

  loadMoreData(){
    const that = this;

    if (!that.data.hasMore || that.data.loading) return ;

    that.setData({loading:true});
    
    that.fetchData((newItems)=>{
      
      const oldItems = that.data.items.concat(newItems);

      that.setData({
          items:oldItems,
          page:this.data.page + 1,
          loading:false,
          hasMore:newItems.length >= this.data.pageSize ? true : false
      });
    });

  }

})

这段代码实现了分页获取新消息的功能，每次触底都会尝试去拉取下一页的消息列表直到没有更多可加载的内容为止[^2]。