当前位置:   article > 正文

微信小程序分页加载数据以及一些深层导致的bug_微信小程序翻页后数据数量不对

微信小程序翻页后数据数量不对

原文链接:

https://developers.weixin.qq.com/community/develop/article/doc/000a2287318888d8a2b856e0750813

内容:

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

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

分页请求数据

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

  1. wx.cloud.database().collection("list")
  2. .skip(5) //从第几个数据开始
  3. .limit(10)

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

  1. let currentPage = 0 // 当前第几页,0代表第一页
  2. let pageSize = 10 //每页显示多少数据
  3. Page({
  4. data: {
  5. dataList: [], //放置返回数据的数组
  6. loadMore: false, //"上拉加载"的变量,默认false,隐藏
  7. loadAll: false //“没有数据”的变量,默认false,隐藏
  8. },
  9. //页面显示的事件
  10. onShow() {
  11. this.getData()
  12. },
  13. //页面上拉触底事件的处理函数
  14. onReachBottom: function() {
  15. console.log("上拉触底事件")
  16. let that = this
  17. if (!that.data.loadMore) {
  18. that.setData({
  19. loadMore: true, //加载中
  20. loadAll: false //是否加载完所有数据
  21. });
  22. //加载更多,这里做下延时加载
  23. setTimeout(function() {
  24. that.getData()
  25. }, 2000)
  26. }
  27. },
  28. //访问网络,请求数据
  29. getData() {
  30. let that = this;
  31. //第一次加载数据
  32. if (currentPage == 1) {
  33. this.setData({
  34. loadMore: true, //把"上拉加载"的变量设为true,显示
  35. loadAll: false //把“没有数据”设为false,隐藏
  36. })
  37. }
  38. //云数据的请求
  39. wx.cloud.database().collection("list")
  40. .skip(currentPage * pageSize) //从第几个数据开始
  41. .limit(pageSize)
  42. .get({
  43. success(res) {
  44. if (res.data && res.data.length > 0) {
  45. console.log("请求成功", res.data)
  46. currentPage++
  47. //把新请求到的数据添加到dataList里
  48. let list = that.data.dataList.concat(res.data)
  49. that.setData({
  50. dataList: list, //获取数据数组
  51. loadMore: false //把"上拉加载"的变量设为false,显示
  52. });
  53. if (res.data.length < pageSize) {
  54. that.setData({
  55. loadMore: false, //隐藏加载中。。
  56. loadAll: true //所有数据都加载完了
  57. });
  58. }
  59. } else {
  60. that.setData({
  61. loadAll: true, //把“没有数据”设为true,显示
  62. loadMore: false //把"上拉加载"的变量设为false,隐藏
  63. });
  64. }
  65. },
  66. fail(res) {
  67. console.log("请求失败", res)
  68. that.setData({
  69. loadAll: false,
  70. loadMore: false
  71. });
  72. }
  73. })
  74. },
  75. })

wxml代码我就不放了,详细可以去看原文链接,这里主要说一下遇到的问题:

这是底下的评论,一开始还没看懂这个问题是什么原因,后来遇到了才发现是一个超级坑的问题!!

问题大概是这样:如果一个用户想取列表数据,如果数据数据量较少的时候才会被出现,数据好像只被获取了一次!进入页面的时候获取一次,退出页面再重新进去数据就不见了!根本的原因是把两个变量

let currentPage = 0 // 当前第几页,0代表第一页 
let pageSize = 10 //每页显示多少数据 

定义为了全局变量,在整个数据块有用,只要整个小程序没有被销毁,这俩数据就一直存在,并且没有重新赋值!每次调用都会在上一次的基础上查数据库!

这是我在底下评论的回答

整体思路解决掉变量作用域的问题,那么就把变量设为页面局部变量就好了

1、就是把变量放在data里面

2、或者是在show函数里面给两个变量重新赋值

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/90033
推荐阅读
相关标签
  

闽ICP备14008679号