Das WeChat-Applet implementiert das rollierende Laden von Daten

Dieser Artikel stellt die Methode des rollierenden Datenladens in WeChat-Miniprogrammen vor. Ich hoffe, dass er für Freunde hilfreich sein wird, die die Entwicklung von WeChat-Miniprogrammen erlernen.

Erforderliche Komponenten und API

Scroll-Ansicht (scrollbarer Ansichtsbereich)

wx. showToast(OBJECT) zeigt ein Meldungsaufforderungsfenster an ---- zeigt die beim Laden von Chrysanthemen verwendeten Attribute an

Empfohlenes Lernen: „Mini-Programmentwicklung》

Scroll-Ansicht muss eine Höhe angeben. Diese Höhe kann entsprechend Ihren eigenen Anforderungen berechnet werden. Ich verwende die verfügbare Höhe des Bildschirms und die Standardseite zeigt 6 an

Scrollen Sie nach unten, um Ereignisse zu binden, die ausgelöst werden müssen

Betriebsereignisfunktion, die hauptsächlich die angeforderten Daten verwendet Die Konkat Die Methode wird zum Zusammenführen und anschließenden Zuweisen von Werten verwendet. Im eigentlichen Projekt kann ich sie durch einen 1,5-Sekunden-Timer ersetzen Schließen Sie

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)
}
}

erfolgreich. Sie können den vollständigen Code direkt kopieren und ausführen.

js-Code

Page({
  /**
   * 页面的初始数据
   */
  data: {
    height: '',
    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
        })
      }
    })
  }
})

Weitere verwandte Tutorials finden Sie unter PHP chinesische Website !

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet implementiert das rollierende Laden von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!