微信小程序列表页分页加载功能

微信小程序做分页加载数据，会做一些下拉加载更多、然后上拉刷新的操作。数据放在一个for循环里去加载，数据源是一个数组对象。在加载下一页数据时，将下一页的数据拼到当前数组后面。
代码如下：
wxml代码

<scroll-view class="scrollview"><block wx:for="{{list}}" wx:key="index"><view class="item">{{item.title}} ({{item.author}})</view></block>
</scroll-view>
<view class="fixed-bottom" bindtap="loadMore">加载更多</view>

js代码

page({/*** 页面的初始数据*/data: {pageIndex: 1,         //列表初始页list: [],            //存放所有数据},//加载初始数据；单独写个方法，而不直接写在onLoad里面，是因为如果要做下拉刷新操作的话，只需要在触发下拉刷新操作后，再调用一下这个方法就可以了。loadInitData() {var that = thisvar pageIndex = 1var msg = '加载第' + pageIndex + '页'wx.showLoading({title: msg,})wx.request({url: 'xxx.com/Content/test-data/data.json',method: 'GET',header: { 'content-type': 'application/json' },success: function (res) {console.log(res)that.setData({pageIndex: pageIndex,list: res.data.data})console.log(that.data.list)},fail: function (res) { },complete: function (res) {wx.hideLoading()},})},//加载更多loadMore() {let that = this,pageIndex = that.data.pageIndex;  // 获取当前页码pageIndex += 1;   //加载当前页的下一页let msg = '加载第' + pageIndex + '页';wx.showLoading({title: msg,})wx.request({url: 'xxx.com/Content/test-data/data.json',header: { 'content-type': 'application/json' },method: 'GET',success: function (res) {//将新一页的数据添加到原数据后面let data = res.data.data;let originList = that.data.list;let newList = originList.concat(data)console.log(newList)that.setData({pageIndex: pageIndex,list: newList})},fail: function (res) { },complete: function (res) {wx.hideLoading()},})},/*** 生命周期函数--监听页面加载*/onLoad: function () {var that = this;that.loadInitData();},
/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {console.log('触发下拉刷新')var that = thisthat.loadInitData()},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {console.log('触发上拉加载')var that = thisthat.loadMore()}
})

上面这种实现方式对于数据量比较少的页面是没有问题，但是如果数据比较大，会有性能问题，因为小程序setData单次设置的数据大小不得超过1024KB。

所以我们要做些改进来优化代码，将每一页请求过来的数据的引用放到一个新的数组listArr集合内。listArr[0]存放第一页数据，listArr[1]存储第二页数据，以此类推。请求新一页，都只需要更新一组数据，这样setData的数据就不会超过微信小程序限制的长度。这个方法首先在loadInitData时，清空listArr，防止新数据与原数据冲突。然后将这一页数据放到listArr[0]中即可。这种实现方法的数据结构是个二维数组 [[{…},{…}],[{…},{…}],…] ；所以需要注意对wxml中的列表结构进行修改。代码如下：
wxml

<scroll-view class="scrollview"><block wx:for="{{listArr}}" wx:key="index" wx:for-item="caption"><view wx:for="{{caption}}" wx:key="index"><view class="item">{{item.title}} ({{item.author}})</view></view></block>
</scroll-view>

Page({/*** 页面的初始数据*/data: {listArr:[],     //数据集合pageIndex:1,    //展示的当前页码pageSize: 40,   //每页加载的数据量（使用的json数据就是40条，实际工作根据需求来）pageCount:3,    //总页数(假设的，实际应该是根据后台返回的数据)},//加载初始页数据loadInitData(){var that = thisvar pageIndex = 1if (that.data.pageIndex === 1){wx.showLoading({title: '加载中...',})}// 刷新时，清空listArr，防止新数据与原数据冲突that.setData({listArr: []})//发送请求wx.request({url: 'xxx.com/Content/test-data/data.json',// data: {//   pageIndex: that.data.pageIndex ,//   pageSize: that.data.pageSize// },header: { 'content-type': 'application/json' },method: 'GET',success: function (res) {console.log(res)var tempList = res.data.datathat.setData({pageIndex: 1,['listArr['+ (pageIndex-1) +']'] : tempList  //动态修改数组某一项的值，需要加中括号})console.log(that.data.listArr)},fail: function (res) { },complete: function (res) { wx.hideLoading();},})},//加载更多loadMore(){var that = thisvar pageIndex = that.data.pageIndexpageIndex += 1wx.showLoading({title: '加载第'+ pageIndex +'页',})wx.request({url: 'xxx.com/Content/test-data/data.json',header: { 'content-type': 'application/json' },method: 'GET',success: function (res) {//将新一页的数据添加到原数据后面let newList = res.data.data;that.setData({pageIndex: pageIndex,['listArr[' + (pageIndex - 1) + ']'] : newList})console.log(that.data.listArr)},fail: function (res) { },complete: function (res) {wx.hideLoading()},})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.loadInitData()},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {let that = thisthat.loadInitData()},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {let that= this,pageIndex = that.data.pageIndex,pageCount = that.data.pageCount;//当页面小于总页数时加载下页面if(pageIndex < pageCount){that.loadMore()}else{wx.showToast({title: '没有更多数据了',})}}})

额外的注意点：
问题：在小程序中中我们重写了上拉加载下拉刷新函数，但是无法触发；
解决：在json配置文件（可在全局里也可在当前页面）中添加这个代码段

{ “enablePullDownRefresh”: true }

问题：有时候会碰到触发了下拉刷新，但看不到那三个小圆点的加载动画。原因是那三个点的默认颜色为白色，而当前背景颜色也是白色。
解决：
1、修改背景色；在wxss中添加代码

page{ background-color: #ebebeb; }

2、修改加载图标的默认颜色；在json配置文件中添加代码

{ “backgroundTextStyle”: “dark” }

参考资料：https://www.jianshu.com/p/066c062845e9

微信小程序列表页分页加载功能相关推荐

【微信小程序】实现分页加载
一.效果已加载全部.png 二.步骤 1. wxml中 <view class="loading" hidden="{{!searchLoading}}" ...
【微信技术-微信小程序】------- 骨架屏(加载流)配置(skeleton-config)及属性详解 (第三篇)
本篇文章是骨架屏(skeleton)配置及属性详解(第三篇) 第一篇文章:[微信技术-微信小程序]-------骨架屏(加载流) 简单入门(第一篇) 第二篇文章:[微信技术-微信小程序]------- ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
微信小程序image图无法加载出来的解决办法（亲测有效）
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片灰色背景显示,这个时候该如何解决这个问题呢?请带着问题查看这篇博客,希望对您有所帮助(点赞skr) 看官方文档? 自行解决? 写在前面(初 ...
微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
微信小程序开发动感十足的加载动画--都在这里！
微信小程序开发动感十足的加载动画--都在这里.jpg 1. 概述我们在学习微信小程序时,应该会遇到载入图片或者动画需要等待的情况,那么这个等待的画面我们应该怎么编写呢?今天我们就分享这样的小教程. ...
微信小程序体验版数据加载不了，打开调试模式下才行（在微信开发者工具上也能加载数据）
记一次微信小程序体验版数据加载不了的解决过程(请求不到数据),供大家参考: 注:域名已经备案.https已经配置.ssl证书在1.2以上版本.小程序后台已经配置服务器域名注:域名已经备案.https ...
微信小程序scroll-view上拉加载更多
微信小程序scroll-view上拉加载更多 1.wxml代码 <scroll-view class="scroll-view-container" scroll-ybind ...
微信小程序中使用wxss加载图片并实现动画
微信小程序中使用wxss加载图片并实现动画记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; wi ...

微信小程序列表页分页加载功能

微信小程序列表页分页加载功能相关推荐

最新文章

热门文章