Maison > Applet WeChat > Développement de mini-programmes > Introduction à la méthode de chargement progressif des données dans l'applet WeChat

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

青灯夜游
Libérer: 2020-04-07 09:20:34
avant
3217 Les gens l'ont consulté

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

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

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

Introduction à la méthode de chargement progressif des données dans lapplet WeChat

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

Introduction à la méthode de chargement progressif des données dans lapplet WeChat

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)
}
}
Copier après la connexion

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

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
        })
      }
    })
  }
})
Copier après la connexion

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!

Étiquettes associées:
source:jisuapp.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal