- 小程序
在微信小程序中，可以通过下拉刷新和上拉加载更多的方式实现列表的加载。
{{item.name}}// JS 代码
Page({
data:{
list:[],
page: 1,
limit: 10,
loading: false // 是否正在加载数据
},
onLoad:function(){
// 页面初始化时加载第一页数据
this.getData();
},
getData: function() {
var that = this;
if (that.data.loading) {
return; // 如果正在加载数据，则不发起新的请求
}
that.setData({
loading: true // 设置正在加载数据的状态为true
});
// 模拟请求数据
setTimeout(function() {
var start = (that.data.page - 1) * that.data.limit;
var end = start + that.data.limit;
var newData = []; // 模拟新获取的数据
for (var i = start; i < end; i++) {
newData.push({
name: '商品' + (i + 1),
id: i + 1
});
}
that.setData({
list: that.data.list.concat(newData), // 将新数据与原有数据合并
page: that.data.page + 1,
loading: false // 设置加载完成的状态为false
});
}, 1000);
},
loadMore: function() {
// 上拉加载更多数据
this.getData();
}
})在上述示例中，我们使用scroll-view组件来实现滚动列表，并通过scrolltolower事件来监听滚动到底部的时机，触发加载更多数据。
在getPageData函数中，我们模拟了一个异步请求数据的过程，并在请求成功后更新页面的list数据。在实际开发中，您需要根据自己的需求调用接口获取数据，并在成功后进行相应操作。
需要注意的是，在当前示例中，我们设置了一个loading的标志位，用于避免重复加载数据。如果正在加载数据时，用户发起了新的加载操作，将直接返回。
请注意，这只是一个基本的示例，您可以根据自己的实际需求进行修改和扩展。例如，可以添加加载动画、错误处理等功能。
