数据分页跟小程序触底事件—小程序入门与实战(十)

上一章节的知识真的是干货满满，学到了用 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。