共计 2707 个字符，预计需要花费 7 分钟才能阅读完成。
上一章节的知识真的是干货满满，学到了用 setData() 可以给数据赋值，可以使用 wx.request 发送 HTTPS 请求，使用 {{}} 绑定数据。
不知道大家发现没有，后端给我们的数据是分页的。
所以我们这章来学习小程序里数据分页应该怎么处理。
分页数据的处理
Page({
data:{cardList:[],// 列表
page:1,// 当前页数
has_more:true // 是否还能分页
},
onLoad(){this.getIndexCard(1)
},
// 获取首页数据信息
getIndexCard(page){
wx.request({
url: 'https://guojiang.club/api/sir/card', // 真实的接口地址
header: {'content-type': 'application/json' // 默认值},
data:{
// 传入的数据为 page，页数
page:1
},
//HTTP 请求方法，默认值为 get
method:'GET',
success:res=>{
// 接口调用成功，在这里就可以获取到数据
console.log(res.data);
res = res.data;
if(res.status){
let pages = res.meta.pagination; // 获取后台分页的分页数据 pagination
let current_page = pages.current_page;// 获取当前是那一页
let total_pages = pages.total_pages;// 获取总页面数
// 下面我们来赋值，这里会用到 es6 的模板字符串, 有不懂得我们下面详细讲解
this.setData({[`cardList[${page-1}]`]:res.data,
page:current_page,
has_more:current_page < total_pages
})
}
},
fail(rej){
// 接口调用失败
console.log(rej.data)
}
})
}
})我们在 data 里面声明了两个新变量
page:1,// 表示当前所处那一页
has_more:true // 是否还能分页在 getIndexCard() 函数多加了以下几行代码
let pages = res.meta.pagination; // 获取后台分页的分页数据 pagination
let current_page = pages.current_page;// 获取当前是那一页
let total_pages = pages.total_pages;// 获取总页面数
// 下面我们来赋值，这里会用到 es6 的模板字符串, 有不懂得我们下面详细讲解
this.setData({[`cardList[${page-1}]`]:res.data,
page:current_page,
has_more:current_page < total_pages
})主要讲解为什么要将 cardList 这样赋值，变成二维数组。
上一节得时候我们就说到过 setData() 单次设置得数据不能超过 1024KB , 尽量避免设置过多得数据。
小程序 setdata 数据限制的解决办法
将原来的一维数组转换成二维数组
// 将 cardList 赋值成 二维数组
this.setData({[`cardList[${page-1}]`]:res.data
})ES6 模板字符串
模板字符串是用来替代原有的字符串拼接操作的。
使用 “（反引号）标识，用 ${} 将变量括起来。
示列：
let name = "qianzaizai";
` 我是 ${name}`[`cardList[${page-1}]`] 中 page 是变量。
Page.onReachBottom() 触底事件
监听用户上拉触底事件。
果酱先生的列表数据分页，我们需要用到的是 onReachBottom()。
- 可以在
app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。 - 在触发距离内滑动期间，本事件只会被触发一次。
# index.js
// 触底分页
onReachBottom(){
// 要获取下一页的数据，所以需要当前页 + 1
let page = this.data.page + 1;
if(this.data.has_more){
// 如果 has_more 为 true，就说明当前页 < 总页数，还有数据
this.getIndexCard(page)
} else {
// 反之，便没有数据
wx.showToast({
title:'再拉也没有啦',
icon:"none"
})
}
},触底分页的关键是：
- 获取下一页
this.data.page记得+1 - 要理解
this.data.has_more的含义，是“当前页 < 总页数”
二维数组需要双重循环
因为我们将 cardList 的数据结构改变了，所以我们需要重新渲染 WXML, 对于二维数组，我们需要双重循环。
<view class="scroll-fullpage" style="height: 100%">
<view style="height: 100%" wx:for="{{cardList}}" wx:for-item="items" wx:for-index="idx" wx:key="idx">
<swiper circular="true" vertical="true" style="height: 100%">
<swiper-item wx:for="{{items}}" wx:key="index">
<image mode="aspectFill"
src="{{item.img_list[0]}}"
class="slide-image">
</image>
<!-- 文字说明 -->
<view class="text-box">
<view class="name">
@{{item.nick_name}}
</view>
<view class="info">
{{item.description}}
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>注意：双重循环的时候一定要重命名 item 跟 index。
一定要使用到 wx:for-item 跟 wx:for-index
代码中，我将 第一层循环的 item 重命名为 wx:for-item="items"，index 重命名为 wx:for-index="idx"。
总结
- 分页数据的处理
-
setData数据限制的解决办法 - 模板字符串
- 触底分页获取数据
下一章节我们将讲解小程序的界面交互的 API, 以及小程序的模块化跟如何自己封装 wx.request。
本文由博客群发一文多发等运营工具平台 OpenWrite 发布
正文完
