數據分頁跟小程序觸底事件—小程序入門與實戰(十)

時間 2021-02-17

標籤 es6 json 小程序後端 api 數組數據結構 app ide 模塊化欄目 JavaScript 简体版

原文原文鏈接

上一章節的知識真的是乾貨滿滿，學到了用 setData() 能夠給數據賦值，能夠使用 wx.request 發送 HTTPS 請求，使用{{}}綁定數據。es6

不知道你們發現沒有，後端給咱們的數據是分頁的。json

因此咱們這章來學習小程序裏數據分頁應該怎麼處理。小程序

分頁數據的處理

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() 函數多加了如下幾行代碼api

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` 數據限制的解決辦法

將原來的一維數組轉換成二維數組app

//將 cardList 賦值成 二維數組
this.setData({
        [`cardList[${page-1}]`]:res.data
    })

ES6 模板字符串

模板字符串是用來替代原有的字符串拼接操做的。ide

使用 `` （反引號）標識，用 ${} 將變量括起來。模塊化

示列：

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>