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

上一章节的知识真的是干货满满,学到了用 setData() 可以给数据赋值,可以使用 wx.request 发送 HTTPS 请求,使用{{}}绑定数据。

不知道大家发现没有,后端给我们的数据是分页的。

image

所以我们这章来学习小程序里数据分页应该怎么处理。

分页数据的处理

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.jsonwindow选项中或页面配置中设置触发距离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