Comment implémenter le chargement par défilement des données dans l'applet WeChat ?

Résumé : 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. projet réel Vous pouvez le remplacer par votre propre ajax

Composants et API requis

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

wx.showToast(OBJECT) Affichage fenêtre d'invite de message ---- affichage du chrysanthème de chargement

besoin d'utiliser des attributs

scrol-view doit spécifier une hauteur, cette hauteur Vous pouvez la calculer selon vos propres besoins. J'utilise la hauteur disponible de l'écran et par défaut une page en affiche 6

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

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, elle peut être remplacée par 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

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!