L'applet WeChat implémente le chargement continu des données

Cet article présente la méthode de chargement progressif des données dans les mini-programmes WeChat. Il a une certaine valeur de référence. J'espère qu'il sera utile aux amis qui apprennent le développement des mini-programmes WeChat !

Composants et API requis

vue par défilement (zone d'affichage déroulante)

wx. showToast (OBJECT) affiche une fenêtre d'invite de message ---- affiche les attributs utilisés lors du chargement de chrysanthème

Apprentissage recommandé : "Développement de mini-programmes》

scrol-view doit spécifier une hauteur. Cette hauteur peut être calculée en fonction de vos propres besoins. J'utilise la hauteur disponible de l'écran et la page par défaut. affiche 6

faites défiler vers le bas pour lier les événements qui doivent être déclenchés

La fonction d'événement d'opération consiste principalement à utiliser les données demandées La méthode concat est utilisée pour fusionner puis attribuer des valeurs. J'utilise une boucle for pour faire semblant d'ajouter des données, je peux la remplacer par mon propre ajax. Afin de simuler le chargement, j'ai ajouté une minuterie de 1,5 seconde. Après avoir appelé l'API de la boîte d'invite avec succès, fermez

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

avec succès, vous pouvez directement copier et exécuter le code complet

code js

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

Pour plus de didacticiels connexes, veuillez faire attention sur le site Web PHP chinois  !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!