网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
3. 加载并渲染更多数据
首先,我们需要对页面滚动事件进行监听。
// 在 Page 中添加以下代码来监听页面滚动事件
Page({
onReachBottom: function() {
// 触发加载更多数据
}
});
onReachBottom
是小程序的内置事件,当页面的内容滚动到底部时会触发这个事件。
接下来,我们需要判断何时到达加载更多数据的条件。
// 在 Page 中添加以下代码来判断是否需要加载更多数据
Page({
data: {
hasMoreData: true, // 是否还有更多数据
loading: false, // 是否正在加载数据
},
onReachBottom: function() {
if (!this.data.hasMoreData || this.data.loading) {
// 如果没有更多数据或者正在加载数据,则不需要加载更多,直接返回
return;
}
// 触发加载更多数据
this.loadMoreData();
},
loadMoreData: function() {
// 标记正在加载数据
this.setData({
loading: true
});
// TODO 加载并渲染更多数据
// 标记加载数据完成
this.setData({
loading: false
});
}
});
我们在 Page 数据中定义了两个变量:hasMoreData
和 loading
。hasMoreData
表示是否还有更多数据,初值为 true。loading
表示是否正在加载数据,初值为 false。
当滚动到底部触发 onReachBottom
事件时,我们首先判断是否还有更多数据需要加载,如果没有了就不需要继续加载;同时,如果正在加载数据,则也不需要再次加载,因为数据正在加载中。
如果需要加载更多数据,则调用 loadMoreData
函数,其中需要我们编写加载数据的代码。
我们来看如何实现加载数据的代码。
// 在 Page 中添加以下代码来加载并渲染更多数据
Page({
data: {
hasMoreData: true, // 是否还有更多数据
loading: false, // 是否正在加载数据
dataList: [], // 所有数据列表
},
onReachBottom: function() {
if (!this.data.hasMoreData || this.data.loading) {
// 如果没有更多数据或者正在加载数据,则不需要加载更多,直接返回
return;
}
// 触发加载更多数据
this.loadMoreData();
},
loadMoreData: function() {
// 标记正在加载数据
this.setData({
loading: true
});
// 加载数据
let newPostList = loadNextPostList();
// 如果没有新的数据了,更改 hasMoreData 为 false
if (newPostList.length == 0) {
this.setData({
hasMoreData: false
});
} else {
// 如果有新的数据,则将新数据加入到原数据列表的末尾,同时也要更新 dataList
let oldPostList = this.data.dataList || [];
let dataList = oldPostList.concat(newPostList);
this.setData({
dataList: dataList
});
}
// 标记加载数据完成
this.setData({
loading: false
});
}
});
// 注意在上述代码定义了一个 loadNextPostList 函数,这个函数负责加载新的数据。
以上代码中的 loadNextPostList
方法是一个模拟数据加载的函数,并不是实际场景中可用的代码。
我们在 loadMoreData
方法中,标记 “正在加载数据”,然后调用 loadNextPostList
加载数据。如果加载结束后返回的数据为空,则表示没有更多的数据了,我们将设置 hasMoreData
为 false,告诉滚动加载的方法不需要再继续调用加载新数据的方法。
如果有新数据,将其合并到原数据中,并将合并后的列表更新到 data 中,同时重新设置 “加载数据完成” 的 flag,告诉滚动加载方法可以继续开始新的加载。
至此,我们已经实现了滚动加载的功能。
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618636735)**
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!