了解什么是触底加载?
需求:有个固定高度的容器,实现容器里面的内容触底加载
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 来模拟异步加载数据的过程,并在加载完成后更新列表数据和隐藏加载中的提示。