Data paging and applet bottom touching event - Introduction and practice of applet

In the previous chapter, I learned that setData() can be used to assign values to data and can be used to wx.request Send HTTPS request and bind data with {}}.

I don't know if you find that the data given to us by the back end is paged.

So in this chapter, we will learn how to deal with data paging in applets.

Processing of paging data

Page({
    data:{
        cardList:[],//list
        page:1,//Current pages
        has_more:true // Is paging still possible
    },
    onLoad(){
        this.getIndexCard(1)
    },
    //Get home page data information
    getIndexCard(page){
        wx.request({
            url: 'https://guojiang.club/api/sir/card '/ / real interface address
            header: {
                'content-type': 'application/json' // Default
            },
            data:{
                //Incoming data is page, number of pages
                page:1
            },
            //HTTP request method, default value is get
            method:'GET',
            success:res=>{
                // If the interface is called successfully, data can be obtained here
                console.log(res.data);
                res = res.data;
                if(res.status){
                    let pages = res.meta.pagination; //Get paging data pagination of background paging
                    let current_page = pages.current_page;//Get the current page
                    let total_pages = pages.total_pages;//Get total pages
                    //Let's assign a value. Here we will use the template string of es6. Do you understand? Let's explain it in detail
                    this.setData({
                        [`cardList[${page-1}]`]:res.data,
                        page:current_page,
                        has_more:current_page < total_pages
                    })

                }
            },
            fail(rej){
                //Interface call failed
                console.log(rej.data)
            }

        })
    }

})

We declared two new variables in data

page:1,//Indicates the current page
has_more:true // Is paging still possible

Add the following lines of code to the getIndexCard() function

let pages = res.meta.pagination; //Get paging data pagination of background paging
let current_page = pages.current_page;//Get the current page
let total_pages = pages.total_pages;//Get total pages
//Let's assign a value. Here we will use the template string of es6. Do you understand? Let's explain it in detail
this.setData({
        [`cardList[${page-1}]`]:res.data,
        page:current_page,
        has_more:current_page < total_pages
    })

It mainly explains why the cardList should be assigned as a two-dimensional array.

In the last section, we talked about that the data set by setData() can't exceed 1024KB at a time. Try to avoid setting too much data.

The solution of setdata data data limitation in applet

Convert the original one-dimensional array to two-dimensional array

//Assign a cardList to a 2D array
this.setData({
        [`cardList[${page-1}]`]:res.data
    })
ES6 template string

Template string is used to replace the original string splicing operation.

Identify with ` (back quote) and enclose variables with ${}.

List:

let name = "qianzaizai";

`I am ${name}`
[`cardList[${page-1}]`] 

page is the variable.

Page.onReachBottom() bottom touching event

Listen for user pull-up and bottom touch events.

Mr. jam's list data paging, we need to use onrealbottom().

  • You can app.json Set the trigger distance onreachbuttomdistance in the window option of or page configuration of.
  • This event will only be triggered once during a slide within the trigger distance.
# index.js

//Bottom touching Pagination
    onReachBottom(){
    //To get data for the next page, you need the current page + 1
        let page = this.data.page + 1; 
        if(this.data.has_more){
        //If has_ If more is true, it means that the current page < total pages and data
            this.getIndexCard(page)
        } else {
        //On the contrary, there is no data
            wx.showToast({
                title:'No more',
                icon:"none"
            })
        }

    },

The key to bottom paging is:

  • Get next page this.data.page Remember + 1
  • To understand this.data.has_more means "current page < total pages"

Two dimensional arrays need double loops

Because we changed the data structure of cardList, we need to re render WXML. For two-dimensional array, we need double loop.

<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>
                       <!--Text description-->
                       <view class="text-box">
                           <view class="name">
                               @{{item.nick_name}}
                           </view>
                           <view class="info">
                               {{item.description}}
                           </view>
                       </view>

                   </swiper-item>
               </swiper>
           </view>

        </view>

Note: when double loop, please rename item and index.

Be sure to use Wx: for item and Wx: for index

In the code, I rename the item of the first level loop to Wx: for item = "items", and the index to Wx: for index = "IDX".

summary

  • Processing of paging data
  • The solution of setData data limitation
  • Template string
  • Bottom touch paging for data acquisition

In the next chapter, we will explain the API of applet interface interaction, and the modularity and self encapsulation of applet wx.request .

Tags: JSON

Posted on Tue, 09 Jun 2020 22:49:36 -0400 by shakuni