小程序实现滚动加载(懒加载)

简介: 小程序是一项很受欢迎的技术,随着其能力的不断增强,越来越多的人开始使用小程序来完成各种任务。当我面面临一个页面有非常多的数据时,该如何处理呢,显然一次性全部加载完,会非常消耗性能的,为了解决这些问题从而出现了一种叫滚动加载的数据处理方式,也被称为“无限滚动”或“懒加载”,它可以使你的页面在不刷新的情况下连续加载更多数据。在本文中,我们将讨论如何在小程序中实现滚动加载。

前言

小程序是一项很受欢迎的技术,随着其能力的不断增强,越来越多的人开始使用小程序来完成各种任务。当我面面临一个页面有非常多的数据时,该如何处理呢,显然一次性全部加载完,会非常消耗性能的,为了解决这些问题从而出现了一种叫滚动加载的数据处理方式,也被称为“无限滚动”或“懒加载”,它可以使你的页面在不刷新的情况下连续加载更多数据。在本文中,我们将讨论如何在小程序中实现滚动加载。

思路

要实现滚动加载,我们需要做以下几个步骤:

1. 监听页面的滚动事件

2. 判断滚动距离和页面高度是否触发加载更多数据的条件

3. 加载并渲染更多数据

首先,我们需要对页面滚动事件进行监听。

// 在 Page 中添加以下代码来监听页面滚动事件
Page({
    
    
  onReachBottom: function() {
    
    
    // 触发加载更多数据
  }
});

onReachBottom 是小程序的内置事件,当页面的内容滚动到底部时会触发这个事件。
接下来,我们需要判断何时到达加载更多数据的条件。
```javascript
// 在 Page 中添加以下代码来判断是否需要加载更多数据
Page({
data: {
hasMoreData: true, // 是否还有更多数据
loading: false, // 是否正在加载数据
},
onReachBottom: function() {
if (!this.data.hasMoreData || this.data.loading) {
// 如果没有更多数据或者正在加载数据,则不需要加载更多,直接返回
return;
}

// 触发加载更多数据
this.loadMoreData();

},
loadMoreData: function() {
// 标记正在加载数据
this.setData({
loading: true
});

// TODO 加载并渲染更多数据

// 标记加载数据完成
this.setData({
  loading: false
});

}
});


我们在 Page 数据中定义了两个变量:`hasMoreData` 和 `loading`。`hasMoreData` 表示是否还有更多数据,初值为 true。`loading` 表示是否正在加载数据,初值为 false。

当滚动到底部触发 `onReachBottom` 事件时,我们首先判断是否还有更多数据需要加载,如果没有了就不需要继续加载;同时,如果正在加载数据,则也不需要再次加载,因为数据正在加载中。

如果需要加载更多数据,则调用 `loadMoreData` 函数,其中需要我们编写加载数据的代码。
>我们来看如何实现加载数据的代码。
```javascript
// 在 Page 中添加以下代码来加载并渲染更多数据
Page({
  data: {
    hasMoreData: true, // 是否还有更多数据
    loading: false, // 是否正在加载数据
    dataList: [], // 所有数据列表
  },
  onReachBottom: function() {
    if (!this.data.hasMoreData || this.data.loading) {
      // 如果没有更多数据或者正在加载数据,则不需要加载更多,直接返回
      return;
    }
    // 触发加载更多数据
    this.loadMoreData();
  },
  loadMoreData: function() {
    // 标记正在加载数据
    this.setData({
      loading: true
    });

    // 加载数据
    let newPostList = loadNextPostList();

    // 如果没有新的数据了,更改 hasMoreData 为 false
    if (newPostList.length == 0) {
      this.setData({
        hasMoreData: false
      });
    } else {
      // 如果有新的数据,则将新数据加入到原数据列表的末尾,同时也要更新 dataList
      let oldPostList = this.data.dataList || [];
      let dataList = oldPostList.concat(newPostList);
      this.setData({
        dataList: dataList
      });
    }

    // 标记加载数据完成
    this.setData({
      loading: false
    });
  }
});
// 注意在上述代码定义了一个 loadNextPostList 函数,这个函数负责加载新的数据。

以上代码中的 loadNextPostList 方法是一个模拟数据加载的函数,并不是实际场景中可用的代码。
我们在 loadMoreData 方法中,标记 “正在加载数据”,然后调用 loadNextPostList 加载数据。如果加载结束后返回的数据为空,则表示没有更多的数据了,我们将设置 hasMoreData 为 false,告诉滚动加载的方法不需要再继续调用加载新数据的方法。
如果有新数据,将其合并到原数据中,并将合并后的列表更新到 data 中,同时重新设置 “加载数据完成” 的 flag,告诉滚动加载方法可以继续开始新的加载。
至此,我们已经实现了滚动加载的功能。
在这里插入图片描述

完整代码示例:

// index.js
Page({
   
   
  data: {
   
   
    dataList: [],
    loading: false,
    hasMoreData: true,
  },

  // 监听滚动到底部的事件
  onReachBottom: function() {
   
   
    if (!this.data.hasMoreData || this.data.loading) {
   
   
      return;
    }

    this.loadMoreData();
  },

  // 加载更多数据
  loadMoreData: function() {
   
   
    this.setData({
   
   
      loading: true
    });

    let newData = this.loadNextData();

    if (newData.length == 0) {
   
   
      this.setData({
   
   
        hasMoreData: false
      });
    } else {
   
   
      let oldData = this.data.dataList;
      let newDataList = oldData.concat(newData);
      this.setData({
   
   
        dataList: newDataList
      });
    }

    this.setData({
   
   
      loading: false
    })
  },

  // 模拟加载新数据的函数
  loadNextData: function() {
   
   
    let data = [];
    for (let i = 0; i < 10; i++) {
   
   
      data.push({
   
   
        id: this.data.dataList.length + i + 1,
        name: "Name " + (this.data.dataList.length + i + 1),
      });
    }
    return data;
  },
});

loadNextData加载数据之后,请求数据为空即页面新数据和之前数据长度一致的话,就可以判定为已经加载完全部数据,为了更好的用户体验,我们还需要在页面上添加loading动画提示,告诉用户正在加载数据,避免用户等待过程中出现不良的体验效果,也可以结合scroll-view使代码逻辑更简单。

目录
相关文章
|
4月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
228 0
|
6月前
|
小程序 API
微信小程序如何利用createIntersectionObserver实现图片懒加载
微信小程序如何利用createIntersectionObserver实现图片懒加载
|
JSON 监控 前端开发
小程序滚动加载分页处理(新详细教程)
成品展示: 下滑可以获取刷新后的新数据结合旧数据渲染前端,从而实现分页功能 关注、收藏、点赞3连😀!!! 关注、收藏、点赞3连😀!!! # 一、所使用到方法及后端函数的介绍 1.小程序涉及到的方法介绍 看下微信文档说明: 监听用户滑到底部操作: onReachBottom:funtion(){ } 思路:在里面写数据调用,对每次滑到底部进行分页起始和分页结束变量累加即可 第二个就是 concat 用法:将旧数据与新数据拼接 1.TP5后端查询方法 limit(起始页,终止页) 二、完整代
333 0
小程序滚动加载分页处理(新详细教程)
|
小程序
小程序入坑记:懒加载
小程序入坑记:懒加载
210 0
|
14天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
109 3
|
21天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
35 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
92 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
91 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
3月前
|
存储 小程序 JavaScript