评论

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

小程序分页加载知识的学习,含源码

我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有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://edu.csdn.net/course/detail/9604

最后一次编辑于  2019-11-07  
点赞 11
收藏
评论

6 个评论

  • Hug蜗牛
    Hug蜗牛
    2019-07-10

    这段代码看似挺好的,没有什么漏洞,但是当数据量少的话,加载完后,退出再进入,就不会再显示数据。目前我还没有想到解决方法。

    2019-07-10
    赞同 1
    回复 6
    • 编程小石头
      编程小石头
      2019-07-12
      我看下,修复下这个问题。谢谢反馈
      2019-07-12
      回复
    • @GOD
      @GOD
      2019-08-03
      你好 ,这个问题修复了吗,我也遇到这个问题
      2019-08-03
      回复
    • LYY
      LYY
      2019-09-15回复@GOD
      onShow()函数,新增一句 currentPage = 0;
      2019-09-15
      3
      回复
    • C&&L
      C&&L
      02-20回复LYY
      这样又可能会导致重复加载数据?
      02-20
      回复
    • A
      A
      03-12
      总算给我遇到这个问题了,刚开始用的时候还没知道你这是啥意思,现在遇到了想请问朋友解决了吗?
      03-12
      回复
    查看更多(1)
  • Xia
    Xia
    2019-06-20

    学习了,比我自己编的精简多了

    2019-06-20
    赞同 1
    回复 2
    • 编程小石头
      编程小石头
      2019-06-21

      哈哈,可以持续关注,后面会把更多优秀小程序源码开源给大家。

      2019-06-21
      2
      回复
    • Xia
      Xia
      2019-06-21

      ok,已关注

      2019-06-21
      回复
  • \
    \
    2019-06-19

    感谢分享,学到了

    2019-06-19
    赞同 1
    回复 2
    • 编程小石头
      编程小石头
      2019-06-19

      哈哈,欢迎分享。

      2019-06-19
      回复
    • \
      \
      2019-06-19回复编程小石头

      分享按钮在哪来着(手动滑稽)

      2019-06-19
      回复
  • 天空
    天空
    2019-11-05

    很棒,谢谢

    2019-11-05
    赞同
    回复 1
    • 编程小石头
      编程小石头
      2019-11-07
      也谢谢你的支持
      2019-11-07
      回复
  • 英忠通信
    英忠通信
    2019-08-30

    设置成 .limit(80),还是取到20条记录。为什么不起作用?

    2019-08-30
    赞同
    回复 1
    • h.d y
      h.d y
      2019-08-31
      limit最大结果集返回数量上限是20
      2019-08-31
      1
      回复
  • 一个不带情绪的王炸
    一个不带情绪的王炸
    2019-06-19

    有个问题想请教下,当加载到第二页时,setData的数据是包括第一页的总共20条还是只是第二页的10条啊?谢谢!

    2019-06-19
    赞同
    回复 5
    • 编程小石头
      编程小石头
      2019-06-20

      20条都包含。

      2019-06-20
      回复
    • 一个不带情绪的王炸
      一个不带情绪的王炸
      2019-06-20回复编程小石头

      那当数据很多例如1000多条(甚至上万条)时,对页面渲染是不是有影响啊?比如页面卡顿啊加载迟缓什么的,看官方文档里好像也说了setData的弊端

      2019-06-20
      回复
    • 编程小石头
      编程小石头
      2019-06-20回复一个不带情绪的王炸

      小程序不提倡数据过多的,因为小程序列表没有复用机制,你数据过多时,会报错的。所以,自己合理控制最终的总数量。

      2019-06-20
      回复
    • 一个不带情绪的王炸
      一个不带情绪的王炸
      2019-06-20回复编程小石头

      啊谢谢回复!最近做项目就遇到了这个问题,数据十分的多就报错,还是得自己处理下数据总量啊

      2019-06-20
      回复
    • 邱一欢
      邱一欢
      2019-06-20

      内存数据应该和页面渲染的数据分开。 内存数据可以一直往里面缓存已下载的数据, 页面渲染页面就是从内存数据中读取当天屏显示的数据来渲染,这样页面就不会卡。

      2019-06-20
      回复
登录 后发表内容