微信小程序,list是服务端返回的翻页数据只有10条,使用 scroll-view 对list进行分页加载,list最多保留30条数据
时间: 2024-11-27 09:15:40 浏览: 0
在微信小程序中,如果你的服务端返回的数据是每页10条,而你需要使用`scroll-view`进行分页加载显示超过10条的内容,你可以采取以下策略:
1. **接收服务端数据**:
首先,在处理`fetch`请求获取数据时,接受服务端返回的当前页数和数据数组。例如,`dataList`存储所有数据,`currentPage`表示当前页码。
2. **限制本地数据**:
将`list`变量初始化为一个长度为30的数组,前10条数据来自服务端返回,剩下的数据暂存为`remainingItems`。每当从服务端加载新数据时,`remainingItems`会被更新。
```javascript
data: {
dataList: [],
remainingItems: [],
currentPage: 1,
},
onLoad() {
this.fetchData();
}
fetchData() {
const limit = 10; // 每次请求的数据量
const offset = (this.currentPage - 1) * limit;
wx.request({
url: 'your-api-url',
data: { page: this.currentPage, limit },
success(res) {
this.dataList = [...this.dataList.slice(0, offset), ...res.data]; // 合并已有的和新的数据
this.remainingItems = res.data.slice(offset, offset + limit); // 更新剩余未加载的部分
}
});
}
```
3. **分页滚动处理**:
在`scroll-view`的`bindscrolltolower`事件中,检查是否到达了最后一页,即`remainingItems.length === 0`。如果还存在未加载的数据,则再次发送请求加载下一页。
4. **动态更新视图**:
在`data`模板中,只渲染`list`数组的前10条数据和`remainingItems`中的数据,而不是一次性全部显示出来。
```html
<scroll-view scroll-y="true" bindscrolltolower="loadMoreData">
<view v-for="item in list.slice(0, 10)" wx:for-item="item">{{item}}</view>
<view v-if="remainingItems.length > 0" wx:for="item in remainingItems">{{item}}</view>
</scroll-view>
```
阅读全文