在 uniapp 中,要在小的 view 内实现列表懒加载,可以通过以下步骤来实现:
- 使用 scroll-view 组件来创建一个可滚动的区域。
- 在 scroll-view内 部放置一个list组件,用于显示数据列表。
- 监听 scroll-view 的滚动事件,当滚动到底部时触发加载更多数据的函数。
- 在加载更多数据的函数中,根据需要从服务器获取更多数据,并更新 list 组件的数据源。
<template>
<view class="container">
<scroll-view scroll-y="true" @scrolltolower="loadMoreData" style="height:100%">
<view class="item" v-for="v in listData" :key="v" style="height: 100px;"> {{v}}</view>
<view class="more">{{text}}</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
text:'',
listData: [], // 初始数据
page: 1, // 当前页码
pageSize: 10 // 每页数据量
}
},
methods: {
// 模拟从服务器获取数据
fetchData(page, pageSize) {
return new Promise((resolve) => {
setTimeout(() => {
const data = Array.from({ length: pageSize }, (_, index) => `Item ${(page - 1) * pageSize + index + 1}`);
resolve(data);
}, 1000);
});
},
// 加载更多数据
async loadMoreData() {
this.text = 'Loading...'
const newData = await this.fetchData(this.page, this.pageSize);
this.text = ''
this.listData = [...this.listData, ...newData];
this.page += 1; // 更新页码
}
},
mounted() {
this.loadMoreData(); // 初始化加载数据
}
}
</script>
<style>
.container {
height: 600rpx; /* 设置容器高度 */
background: red;
}
.item{
border-bottom: 1px solid #ccc;
}
.more{
padding: 10rpx;
text-align: center;
}
</style>
在这个示例中,我们创建了一个 scroll-view 组件,并在其内部放置了一个 list 组件来显示数据。通过监听 scroll-view 的 scrolltolower
事件,我们可以在用户滚动到底部时调用 loadMoreData
方法来加载更多数据。每次加载数据后,我们将新数据添加到 listData 数组中,并更新页面的显示。