上一章节的知识真的是干货满满，学到了用 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; //获取后台分页的分页数据 paginationlet 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 发布