uniapp上拉加载更多数据
时间: 2023-09-08 07:12:59 浏览: 90
在 Uniapp 中实现上拉加载更多数据,可以使用 `onReachBottom` 事件来监听页面滚动到底部的时机。以下是一个简单的示例代码:
```vue
<template>
<view>
<!-- 显示数据列表 -->
<view v-for="(item, index) in dataList" :key="index">
<text>{{ item }}</text>
</view>
<!-- 加载更多提示 -->
<view v-if="loading">加载中...</view>
<view v-else>已经到底啦</view>
</view>
</template>
<script>
export default {
data() {
return {
dataList: [], // 数据列表
loading: false, // 是否正在加载数据
page: 1, // 当前页码
pageSize: 10, // 每页数据数量
};
},
mounted() {
// 初始化加载第一页数据
this.loadData();
},
methods: {
loadData() {
// 模拟异步加载数据
this.loading = true;
setTimeout(() => {
const newData = []; // 新加载的数据
for (let i = 0; i < this.pageSize; i++) {
newData.push(`第 ${this.page} 页第 ${i + 1} 条数据`);
}
this.dataList = this.dataList.concat(newData);
this.page++;
this.loading = false;
}, 1000);
},
onReachBottom() {
// 监听到页面滚动到底部,加载更多数据
this.loadData();
},
},
};
</script>
```
在上面的示例中,通过 `onReachBottom` 方法监听页面滚动到底部的事件,并调用 `loadData` 方法加载更多数据。`loadData` 方法模拟了异步加载数据的过程,通过 `setTimeout` 来延迟加载数据并更新页面。`dataList` 数组用于存储已加载的数据,`page` 记录当前页码,`loading` 用于控制加载提示的显示与隐藏。
当页面滚动到底部时,会触发 `onReachBottom` 方法,然后调用 `loadData` 方法加载更多数据。当数据加载完成后,页面会自动更新,显示新加载的数据。
你可以根据实际需求修改示例代码中的数据加载方式,例如从后端接口获取数据。另外,根据 Uniapp 的文档和你的具体需求,还可以对加载过程进行优化和定制。