小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 微信小程序触底加载scroll-view

微信小程序触底加载scroll-view

了解什么是触底加载?

需求:有个固定高度的容器,实现容器里面的内容触底加载

1、内容盒子的高度

2、盒子里内容的总高度

3、滚动条的scrollTop

触底加载的原理就是 当里面的容器触底的时候进行分页,请求接口合并数据


  
  {{item}}
  
  加载中...
Page({
  data: {
    list: [], // 列表数据
    loading: false // 是否正在加载中
  },
  onLoad() {
    // 初始化数据
    this.loadData();
  },
  // 加载数据
  loadData() {
    // 如果已经在加载中,则不再重复加载
    if (this.data.loading) {
      return;
    }
    // 显示加载中提示
    this.setData({
      loading: true
    });
    // 模拟异步加载数据
    setTimeout(() => {
      const newData = Array.from({ length: 10 }, (_, i) => `Item ${this.data.list.length + i}`);
      this.setData({
        list: [...this.data.list, ...newData],
        loading: false
      });
    }, 1000);
  },
  // 触底加载更多数据
  loadMoreData() {
    this.loadData();
  }
})


我们使用 scroll-view 组件来实现列表滚动,并通过 bindscrolltolower 事件来监听列表滚动到底部的事件。当触发该事件时,我们调用 loadData 方法来加载更多数据,并在加载数据时显示一个加载中的提示。在 loadData 方法中,我们使用 setTimeout 来模拟异步加载数据的过程,并在加载完成后更新列表数据和隐藏加载中的提示。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了