您现在的位置是:首页 > 正文

微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载

2024-01-30 20:25:42阅读 2

我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响性能。所以这一节,我们来讲讲小程序分页加载数据的实现。

老规矩,先看效果图

可以看到我们每页显示10条数据,当滑动到底部时,会加载第二页的数据,再往下滑动,就加载第三页的数据。由于我们一共21条数据,所以第三页加载完以后,会有一个“已加载全部数据”的提示。

本节知识点

1,小程序分页加载 2,小程序列表显示 3,云数据库的使用 4,云数据库分页请求数据的实现

一,先定义数据

我们做分页数据加载,肯定要先准备好数据,数据已经给大家准备好,如下图,文章末尾会贴出数据源和本节课源码的下载地址。

然后把数据导入到我们的云开发的数据库里,关于数据如何导入,这里不再讲解,不知道的同学,请看下面这篇文章。或者去老师历史文章里找一下。 《小程序云开发入门---云数据库数据源的导入与导出》

下面给大家看下我们的数据源,长什么样。其实很简单,就是简单的定义21条数据。

然后在看导入到数据库的样子。

二,分页请求数据

我们第一步准备好了数据以后,接下来就来讲讲如何在js里做分页加载数据。 首先我们这里用到了小程序云开发数据库的知识点 1,get方法:获取云数据库数据 2,skip方法:跳过前面几条数据,请求后面的数据 3,limit方法:请求多少条数据。 比如下面这段代码,就是跳过前5条,请求从第6条开始往后的10条数据,就是请求6~15的数据,我们做分页加载也就是基于这个原理。

 wx.cloud.database().collection("list")
      .skip(5) //从第几个数据开始
      .limit(10)
复制代码

下面把我们index.js的完整代码贴给大家。

//老师微信:2501902696
let currentPage = 0 // 当前第几页,0代表第一页 
let pageSize = 10 //每页显示多少数据 
Page({
  data: {
    dataList: [], //放置返回数据的数组  
    loadMore: false, //"上拉加载"的变量,默认false,隐藏  
    loadAll: false //“没有数据”的变量,默认false,隐藏  
  },

  //页面显示的事件
  onShow() {
    this.getData()
  },
  //页面上拉触底事件的处理函数
  onReachBottom: function() {
    console.log("上拉触底事件")
    let that = this
    if (!that.data.loadMore) {
      that.setData({
        loadMore: true, //加载中  
        loadAll: false //是否加载完所有数据
      });

      //加载更多,这里做下延时加载
      setTimeout(function() {
        that.getData()
      }, 2000)
    }


  },
  //访问网络,请求数据  
  getData() {
    let that = this;
    //第一次加载数据
    if (currentPage == 1) {
      this.setData({
        loadMore: true, //把"上拉加载"的变量设为true,显示  
        loadAll: false //把“没有数据”设为false,隐藏  
      })
    }
    //云数据的请求
    wx.cloud.database().collection("list")
      .skip(currentPage * pageSize) //从第几个数据开始
      .limit(pageSize)
      .get({
        success(res) {
          if (res.data && res.data.length > 0) {
            console.log("请求成功", res.data)
            currentPage++
            //把新请求到的数据添加到dataList里  
            let list = that.data.dataList.concat(res.data)
            that.setData({
              dataList: list, //获取数据数组    
              loadMore: false //把"上拉加载"的变量设为false,显示  
            });
            if (res.data.length < pageSize) {
              that.setData({
                loadMore: false, //隐藏加载中。。
                loadAll: true //所有数据都加载完了
              });
            }
          } else {
            that.setData({
              loadAll: true, //把“没有数据”设为true,显示  
              loadMore: false //把"上拉加载"的变量设为false,隐藏  
            });
          }
        },
        fail(res) {
          console.log("请求失败", res)
          that.setData({
            loadAll: false,
            loadMore: false
          });
        }
      })
  },
})
复制代码

上面的代码就是我们实现分页加载的所有逻辑代码。简单说下代码 1,我们首先进页面时会请求前10条内容 2,10条内容请求成功以后,我们会把请求到的内容加入dataList数组,然后把dataList里的数据显示到页面上。并将currentPage加一,用于请求第二页数据。 3,当用户滑动到底部时,会触发onReachBottom事件,在这个事件里做第二页到请求。然后第二页数据请求成功以后。继续将currentPage加1,这里要记住一定,一定要请求成功以后才将currentPage +1。

三,列表布局和样式

其实index.wxml和index.wxss的代码很简单,给大家把代码贴出来。 1,index.wxml

<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower">
  <view class="result-item" wx:for="{{dataList}}" wx:key="item">
    <text class="title">{{item.content}}</text>
  </view>
  <view class="loading" hidden="{{!loadMore}}">正在载入更多...</view>
  <view class="loading" hidden="{{!loadAll}}">已加载全部</view>
</scroll-view>
复制代码

2,index.wxss

page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.result-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0 20rpx 110rpx;
  overflow: hidden;
  border-bottom: 2rpx solid #e5e5e5;
}
.title {
  height: 110rpx;
}
.loading {
  position: relative;
  bottom: 5rpx;
  padding: 10rpx;
  text-align: center;
}
复制代码

到这里我们就完整的实现里分页加载功能了。

源码和数据源,已经给大家放到网盘里了,有需要的同学请在文章底部留言,或者私信老师。

转载于:https://juejin.im/post/5d09dd37f265da1b667bdf1c

网站文章

  • 计算机表格中如何计算数据透视表,Excel中如何在数据透视表中进行计算

    会计工作中离不开excel电子表格软件,它不仅具有数据输入、输出、显示、分类、统计、查询等数据处理的基本功能,还具有强大的数据分析功能与程序执行自动化功能,为会计人员的工作提供了许多便利。数据透视表是...

    2024-01-30 20:25:13
  • Maven中pom文件引入依赖标签dependency的scope属性

    依赖中引入了主要用于管理依赖关系的作用范围,目前依赖项的作用域可以使用五个值,compile、runtime、test、provided和systemcompile:依赖项的默认作用范围,即当没有指定...

    2024-01-30 20:25:07
  • Python之爬虫-- Requests

    目录Requests-献给人类一、简介二、安装方式三、 GET请求四、POST请求 五、显示json文件六、代理(proxies参数) 七、用户验证八、Cookies 和 Session1、Cookies2、Session九、SSL证书验证https请求验证ssl证书(有一些网站的ssl证书是自己写的,比如12306和360)Requests...

    2024-01-30 20:24:34
  • 控制台查看网页的宽高随浏览器缩放而缩放

    控制台查看网页的宽高随浏览器缩放而缩放

    记住这些代码 随时查看浏览器得宽度高度以及分辨率

    2024-01-30 20:24:27
  • 创建自己的yum源

    创建自己的yum源

    创建自己的yum源2013-02-28 09:18 2328人阅读 评论(0) 收藏 举报 分类:Linux(172) 目录(?)[+]转自:http://www.bsdmap.com/2011/07/06/createrepo/创建自己的yum源  最终还是决定使用rpm来管理系统上“定制”的

    2024-01-30 20:24:19
  • cocos creator 使用第三方包

    NPM 模块使用方法: 运行npm安装命令时当前的路径应该在项目的根目录(也就是包括 assets, library 这些目录的根目录)npm install xxx --save 时可以加上 save 指令,自动生成 package.json 方便其他人共享开发环境设置安装完成之后,在 assets 目录下的用户脚本里使用 var npmModule = require(&#39;npmM

    2024-01-30 20:24:12
  • 开发工具之IDEA

    开发工具之IDEA

    欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法...

    2024-01-30 20:23:41
  • Unity 升级项目到Urp(通用渲染管线)以及画面后处理 热门推荐

    Unity 升级项目到Urp(通用渲染管线)以及画面后处理 热门推荐

    前言: Urp是一种SRP(可编程渲染管线),相比于默认渲染管线,在提升画面表现的同时,也可以提升游戏的性能表现 开始升级前准备 在开始之前,需要你备份你的项目,确保在升级过程中出现问题还有挽回的空间...

    2024-01-30 20:23:32
  • android9.0与5g,5G双卡+Android9.0!vivo年度最强旗舰机曝光

    android9.0与5g,5G双卡+Android9.0!vivo年度最强旗舰机曝光

    原标题:5G双卡+Android9.0!vivo年度最强旗舰机曝光伴随着2019年的临近,5G时代越来越近,高通、英特尔、华为、三星等都陆续宣布将会推出5G基带,高通更是在近期宣布开始量产基于7nm工...

    2024-01-30 20:23:26
  • html一张图片水平居中,CSS 图片水平居中

    html一张图片水平居中,CSS 图片水平居中

    使用CSS让图片中网页中水平居中代码:text-align:center内容居中text-align:center介绍:text-align:center为水平内容居中功能,图片放入网页中是使用img...

    2024-01-30 20:22:58