Introduction to the method of rolling data loading in WeChat applet-Mini Program Development-php.cn

Introduction to the method of rolling data loading in WeChat applet

青灯夜游

Release： 2020-04-07 09:20:34

forward

3216 people have browsed it

The operation event function mainly uses the concat method to merge the requested data and then assign the value. I used a for loop to pretend to add the data. In the actual project, it can be replaced with my own ajax

Introduction to the method of rolling data loading in WeChat applet

Required components and api

scroll-view (scrollable view area)

wx.showToast(OBJECT) displays the message prompt window - ---Display loading chrysanthemum

Required attributes

Introduction to the method of rolling data loading in WeChat applet

scrol-view needs to specify a height, this height can be based on your own needs For calculation, I use the available height of the screen and the default page displays 6

Introduction to the method of rolling data loading in WeChat applet

Scroll to the bottom and bind the events that need to be triggered

Operation event function, The main thing is to merge the requested data using the concat method, and then assign the value. I used a for loop to pretend to add the data. In the actual project, I can change it to my own ajax, and in order to simulate the loading, I added a 1.5 second timer. , first call the prompt box api successfully and then close

lower() {
var result = this.data.res;
var resArr = [];
  //这里可以使用自己的ajax
for (let i = 0; i < 10; i++) {
resArr.push(i);
};
var cont = result.concat(resArr);//合并请求的数据
console.log(resArr.length);
if (cont.length >= 100) {
wx.showToast({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” 
title: \&#39;我也是有底线的\&#39;,
icon: \&#39;success\&#39;,
duration: 300
});
return false;
} else {
wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” 
title: \&#39;加载中\&#39;,
icon: \&#39;loading\&#39;,
});
setTimeout(() => {
this.setData({
res: cont
});
wx.hideLoading();
}, 1500)
}
}

Copy after login

successfully, you can directly copy and run the complete code

js code

Page({
  /**
   * 页面的初始数据
   */
  data: {
    height: \&#39;\&#39;,
    res: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  },
  lower() {
    var result = this.data.res;
    var resArr = [];
    for (let i = 0; i < 10; i++) {
      resArr.push(i);
    };
    var cont = result.concat(resArr);
    console.log(resArr.length);
    if (cont.length >= 100) {
      wx.showToast({ //如果全部加载完成了也弹一个框
        title: \&#39;我也是有底线的\&#39;,
        icon: \&#39;success\&#39;,
        duration: 300
      });
      return false;
    } else {
      wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  
        title: \&#39;加载中\&#39;,
        icon: \&#39;loading\&#39;,
      });
      setTimeout(() => {
        this.setData({
          res: cont
        });
        wx.hideLoading();
      }, 1500)
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          height: res.windowHeight
        })
      }
    })
  }
})

Copy after login

Recommended: " Mini Program Development Tutorial 》

The above is the detailed content of Introduction to the method of rolling data loading in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!