Introducer

The requirement is to pull up and load data, which is actually to obtain paging data. The background is the normal ajax request paging data. The small program part is a little more complex. I checked some data, but I couldn't find the link to the data, so I can't put it for reference.

Applet page

When it comes to data loops, here's a simple example

 <view wx:for="{{array}}">
     <view >{{item.name}}</view>
     <view >{{item.age}}</view>
  </view>

The development mode of MVVM (such as React, Vue) advocates the separation of rendering and logic. In a word, don't let JS directly control DOM. JS only needs to manage state, and then describe the relationship between state and interface structure through a template syntax.

JS part of applet

JS is responsible for data acquisition and splicing

Page({

    /**
     * Initial data of the page
     */
    data: {
        array: [],
        page: 1,
        isReachBottom: true // Pull up loading or not
    },

    // get data
    getList: function () {
        var that = this;
        wx.request({
            url: 'https://xxx',
            data: {
                p: that.data.page
            },
            success: function (res) {
                if (res.data.message == 'success') {
                    // Get success, data append
                    var list = [];
                    var count = res.data.data.length
                    for (var i = 0; i < count; i++) {
                        var data = {name: '', age: ''};
                        data.name = res.data.data[i].name;
                        data.age = res.data.data[i].age;
                        list.push(data);
                    }
                    Array.prototype.push.apply(that.data.array, list);
                    that.setData({
                        array: that.data.array
                    })
                } else if (res.data.message == 'finish') {
                    // No data, do not pull up again
                    that.setData({
                        isReachBottom: false
                    })
                }
            }
        })
    },

    /**
     * Handling function of page pull bottom event
     */
    onReachBottom: function () {
        if (this.data.isReachBottom == true) {
            this.setData({
                page: this.data.page + 1
            })
            this.getList()
        }
    }

})

About pull-up and bottom touch, and these characteristics

reference material: Small program,List render,Registration page.