uniapp H5页面实现懒加载

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

  1. 使用 scroll-view 组件来创建一个可滚动的区域。
  2. 在 scroll-view内 部放置一个list组件,用于显示数据列表。
  3. 监听 scroll-view 的滚动事件,当滚动到底部时触发加载更多数据的函数。
  4. 在加载更多数据的函数中,根据需要从服务器获取更多数据,并更新 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 数组中,并更新页面的显示。

相关推荐
艾小逗42 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk5 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务