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

相关推荐
uhakadotcom2 分钟前
Caddy Web服务器初体验:简洁高效的现代选择
前端·面试·github
前端菜鸟来报道5 分钟前
前端react 实现分段进度条
前端·javascript·react.js·进度条
花楸树28 分钟前
前端搭建 MCP Client(Web版)+ Server + Agent 实践
前端·人工智能
wuaro28 分钟前
RBAC权限控制具体实现
前端·javascript·vue
程序猿看视界31 分钟前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
专业抄代码选手33 分钟前
【JS】instanceof 和 typeof 的使用
前端·javascript·面试
用户00798136209733 分钟前
6000 字+6 个案例:写给普通人的 MCP 入门指南
前端
用户876128290737438 分钟前
前端ai对话框架semi-design-vue
前端·人工智能
干就完了141 分钟前
项目中遇到浏览器跨域前端和后端解决方案以及大概过程
前端
我是福福大王43 分钟前
前后端SM2加密交互问题解析与解决方案
前端·后端