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

总目录展示

该笔记共八个节点（由浅入深），分为三大模块。

高性能。 秒杀涉及大量的并发读和并发写，因此支持高并发访问这点非常关键。该笔记将从设计数据的动静分离方案、热点的发现与隔离、请求的削峰与分层过滤、服务端的极致优化这4个方面重点介绍。

一致性。 秒杀中商品减库存的实现方式同样关键。可想而知，有限数量的商品在同一时刻被很多倍的请求同时来减库存，减库存又分为“拍下减库存”“付款减库存”以及预扣等几种，在大并发更新的过程中都要保证数据的准确性，其难度可想而知。因此，将用一个节点来专门讲解如何设计秒杀减库存方案。

高可用。 虽然介绍了很多极致的优化思路，但现实中总难免出现一些我们考虑不到的情况，所以要保证系统的高可用和正确性，还要设计一个PlanB来兜底，以便在最坏情况发生时仍然能够从容应对。笔记的最后，将带你思考可以从哪些环节来设计兜底方案。

---

篇幅有限，无法一个模块一个模块详细的展示（这些要点都收集在了这份《高并发秒杀顶级教程》里），麻烦各位转发一下（可以帮助更多的人看到哟！）

由于内容太多，这里只截取部分的内容。

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

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

<text class="title">{{item.content}}</text>

正在载入更多…

已加载全部

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;

}

# 更多：Java进阶核心知识集

包含：JVM，JAVA集合，网络，JAVA多线程并发，JAVA基础，Spring原理，微服务，Zookeeper，Kafka，RabbitMQ，Hbase，MongoDB，Cassandra，设计模式，负载均衡，数据库，一致性哈希，JAVA算法，数据结构，加密算法，分布式缓存等等

![image](https://img-blog.csdnimg.cn/img_convert/92ae030f1ed5ce4a6382ddeec48ba5be.webp?x-oss-process=image/format,png)

# 高效学习视频


> **本文已被[CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)收录**

**[需要这份系统化的资料的朋友，可以点击这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

等等

[外链图片转存中...(img-TzCDzuUk-1715539884033)]

# 高效学习视频


> **本文已被[CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)收录**

**[需要这份系统化的资料的朋友，可以点击这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**