uniapp的scroll-view实现下拉加载的代码
时间: 2023-06-02 21:04:28 浏览: 225
可以参考如下代码实现下拉加载:
```html
<scroll-view scroll-y="true" bindscrolltolower="loadMore" style="height: 100%;">
<!-- 在这里展示列表数据 -->
</scroll-view>
```
```js
// 在页面中定义加载数据的方法,然后绑定到 scroll-view 中
Page({
data: {
listData: [], // 列表数据
page: 1, // 当前页数
limit: 20, // 每页限制数
},
onLoad: function () {
// 页面初始化加载数据
this.getListData();
},
// 获取列表数据
getListData: function () {
const { page, limit, listData } = this.data;
// 发起请求获取数据,省略代码,成功后将数据拼接到 listData 中
this.setData({
listData: [...listData, ...newData],
});
},
// 下拉加载更多数据
loadMore: function () {
const { page } = this.data;
this.setData({
page: page + 1,
});
this.getListData();
},
});
```
这样实现之后,用户在下拉到底部时会触发 `loadMore` 方法,此时会将 `page` 加 1,然后再次调用 `getListData` 方法获取数据,实现下拉加载效果。
阅读全文