Heim > WeChat-Applet > Mini-Programmentwicklung > Wie implementiert man das scrollende Laden von Daten im WeChat-Applet?

Wie implementiert man das scrollende Laden von Daten im WeChat-Applet?

青灯夜游
Freigeben: 2020-04-02 09:35:54
nach vorne
2656 Leute haben es durchsucht

Wie implementiert man das scrollende Laden von Daten im WeChat-Applet?

Zusammenfassung: Die Operationsereignisfunktion verwendet hauptsächlich die Concat-Methode, um die angeforderten Daten zusammenzuführen und dann den Wert zuzuweisen aktuelles Projekt Sie können es durch Ihr eigenes Ajax ersetzen

Erforderliche Komponenten und API

Scroll-Ansicht (scrollbarer Ansichtsbereich)

wx.showToast(OBJECT) Display Meldungsaufforderungsfenster----Anzeige lädt Chrysantheme

Muss Attribute verwenden

Wie implementiert man das scrollende Laden von Daten im WeChat-Applet?

Scroll-Ansicht muss eine Höhe angeben, diese Höhe kann berechnet werden Je nach Ihren eigenen Bedürfnissen nutze ich die verfügbare Höhe des Bildschirms und standardmäßig werden auf einer Seite 6 angezeigt.

Wie implementiert man das scrollende Laden von Daten im WeChat-Applet?

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

Die Operation-Ereignisfunktion verwendet hauptsächlich die Concat-Methode, um die angeforderten Daten zusammenzuführen und dann den Wert zuzuweisen. Ich habe eine for-Schleife verwendet, um vorzugeben, dass die Daten durch mein eigenes Ajax ersetzt werden können , und um das Laden zu simulieren, habe ich einen 1,5-Sekunden-Timer hinzugefügt, zuerst die Eingabeaufforderungsbox-API erfolgreich aufrufen und dann

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)
}
}
Nach dem Login kopieren

erfolgreich schließen, Sie können den vollständigen Code direkt kopieren und ausführen

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
        })
      }
    })
  }
})
Nach dem Login kopieren

Empfohlen: „Mini-Tutorial zur Programmentwicklung

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

Verwandte Etiketten:
Quelle:jisuapp.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage