uniapp H5页面实现懒加载

&活在当下&2025-01-04 13:36

在 uniapp 中，要在小的 view 内实现列表懒加载，可以通过以下步骤来实现：

使用 scroll-view 组件来创建一个可滚动的区域。
在 scroll-view内部放置一个list组件，用于显示数据列表。
监听 scroll-view 的滚动事件，当滚动到底部时触发加载更多数据的函数。
在加载更多数据的函数中，根据需要从服务器获取更多数据，并更新 list 组件的数据源。

javascript 复制代码

<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 数组中，并更新页面的显示。