Comment obtenir l'effet d'actualisation déroulante et de chargement pull-up de la liste dans l'applet WeChat ?

Cet article présente principalement l'applet WeChat en détail pour implémenter l'actualisation des listes déroulantes et le chargement des pull-ups. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article sont partagés. avec vous. Le code spécifique pour l'affichage de l'image de la grille à neuf carrés Android est pour votre référence. Le contenu spécifique est le suivant

Téléchargement DEMO

Rendu

Principe

Utilisez la fonction onPullDownRefresh de l'applet WeChat (fonction d'écoute de rafraîchissement déroulant) et la fonction onReachBottom (fonction d'écoute de chargement pull-up) pour surveiller la dynamique de pull-down et de pull-up de la page, mettant ainsi à jour la page. Les données sont modifiées !

Configuration de la page JSON

• enablePullDownRefresh : activer l'actualisation déroulante

• onReachBottomDistance : page ; pull-up La distance depuis le bas de la page lorsque l'événement du bas est déclenché, en px.

{
 "enablePullDownRefresh": true,
 "onReachBottomDistance": 50
}

WXML

<view class="tui-content">
 <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view>
</view>

JS

SetTimeout est utilisé ici pour simuler la demande de données
le chargement des données est limité à trois ; fois, l'appel de wx .showToast n'affiche plus de données.

Page({
 data: {
 dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
 count : 0
 },
 onPullDownRefresh(){
 var self = this;
 setTimeout(() => {
  // 模拟请求数据，并渲染
  var arr = self.data.dataList, max = Math.max(...arr);
  for (var i = max + 1; i <= max + 3; ++i) {
  arr.unshift(i);
  }
  self.setData({ dataList: arr });
  // 数据成功后，停止下拉刷新
  wx.stopPullDownRefresh();
 }, 1000);
 },
 onReachBottom(){
 var arr = this.data.dataList, max = Math.max(...arr);
 if (this.data.count < 3) {
  for (var i = max + 1; i <= max + 5; ++i) {
  arr.push(i);
  }
  this.setData({
  dataList: arr,
  count: ++this.data.count
  });
 } else {
  wx.showToast({
  title: &#39;没有更多数据了！&#39;,
  image: &#39;../../src/images/noData.png&#39;,
  })
 }
 }
})

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

À propos de la façon dont vue implémente le chargement dynamique de l'image src

Comment implémenter la sous-séquence commune la plus longue en javascript

Comment obtenir la progression du téléchargement du fichier dans Node.js ?

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!