微信小程序上拉触底添加数据
时间: 2023-12-14 11:33:39 浏览: 95
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
以下是微信小程序上拉触底添加数据的示例代码:
1. 在wxml文件中,使用scroll-view组件,并绑定onScrollToLower事件:
```html
<scroll-view scroll-y="true" bindscrolltolower="loadMoreData">
<!-- 数据列表 -->
<view wx:for="{{ dataList }}" wx:key="{{ index }}">
<!-- 数据项 -->
</view>
<!-- 加载中提示 -->
<view wx:if="{{ isloading }}">加载中...</view>
</scroll-view>
```
2. 在js文件中,定义loadMoreData函数,并在其中发送请求获取更多数据:
```javascript
Page({
data: {
dataList: [], // 数据列表
isloading: false // 是否正在加载中
},
// 上拉触底事件
loadMoreData: function() {
// 如果正在加载中,则直接返回
if (this.data.isloading) {
return;
}
// 设置正在加载中的状态
this.setData({
isloading: true
});
// 发送请求获取更多数据
wx.request({
url: 'url/to/get/more/data',
success: res => {
// 将新数据添加到原有数据列表中
const newDataList = this.data.dataList.concat(res.data);
// 更新数据列表和加载中状态
this.setData({
dataList: newDataList,
isloading: false
});
},
fail: err => {
// 请求失败时,更新加载中状态
this.setData({
isloading: false
});
}
});
}
});
```
阅读全文