Introduction à la méthode de chargement progressif des données dans l'applet WeChat

La fonction d'événement d'opération utilise principalement la méthode concat pour fusionner les données demandées, puis attribuer la valeur. J'ai utilisé une boucle for pour faire semblant d'ajouter les données dans le projet réel, vous pouvez la remplacer par votre propre ajax

Composants et API requis

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

wx.showToast(OBJECT) affiche l'invite de message fenêtre - ---Afficher le chrysanthème de chargement

Attributs nécessaires

la vue défilante doit spécifier une hauteur, qui peut être en fonction de vos propres besoins Pour le calcul , j'utilise la hauteur disponible de l'écran et la page par défaut affiche 6

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

opération fonction d'événement, l'essentiel est de fusionner les données demandées à l'aide de la méthode concat, puis d'attribuer la valeur. J'ai utilisé une boucle for pour faire semblant d'ajouter les données dans le projet réel, je peux les changer en mon propre ajax, et. afin de simuler le chargement, j'ai ajouté une minuterie de 1,5 seconde, appelez d'abord l'API de la boîte d'invite avec succès, puis fermez-la

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

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

Recommandé : "

Tutoriel de développement de mini-programmes 》

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!