uniapp H5页面实现懒加载
在 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 数组中，并更新页面的显示。