Mini program development page pull-up to load data (with code)

The content of this article is about page pull-up and loading data (with code) in the development of small programs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The requirement is to pull up and load data, but the actual requirement is to obtain paging data. The background is a normal ajax request for paging data. The applet part is a little more complicated. I checked some information and completed it. However, the link to the information cannot be found and cannot be put up for reference.

Mini program page

Involves data loop, the following is a simple example

 <view>
     <view>{{item.name}}</view>
     <view>{{item.age}}</view>
  </view>

MVVM development model (such as React, Vue) advocates combining rendering and logic separation. To put it simply, JS no longer needs to directly control the DOM. JS only needs to manage the state, and then use a template syntax to describe the relationship between the state and the interface structure.

JS part of the mini program

The JS part is responsible for obtaining data and splicing data

Page({

    /**
     * 页面的初始数据
     */
    data: {
        array: [],
        page: 1,
        isReachBottom: true // 是否上拉加载
    },

    // 获取数据
    getList: function () {
        var that = this;
        wx.request({
            url: 'https://xxx',
            data: {
                p: that.data.page
            },
            success: function (res) {
                if (res.data.message == 'success') {
                    // 获取成功，数据追加
                    var list = [];
                    var count = res.data.data.length
                    for (var i = 0; i <p>About pull-up and bottoming, and these features<br> </p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/374/797/427/1548211796238512.png?x-oss-process=image/resize,p_40" class="lazy" title="1548211796238512.png" alt="Mini program development page pull-up to load data (with code)"></p>

The above is the detailed content of Mini program development page pull-up to load data (with code). For more information, please follow other related articles on the PHP Chinese website!