Analyse de la méthode de mise en œuvre de l'actualisation déroulante et du chargement pull-up de la liste d'applets WeChat

L'exemple de cet article décrit la méthode d'implémentation d'actualisation de liste déroulante et de chargement pull-up de la fonction de rendu de liste d'applets WeChat. Partagez-le avec tout le monde pour référence, les détails sont les suivants :

L'applet WeChat a une étiquette spéciale pour le 9 janvier 2017, qui est rapidement devenue populaire sur Internet et dans le cercle d'amis. a également écrit un programme de démonstration Découvrez-le. L'applet WeChat est quelque peu similaire à vuejs, les deux sont des vues basées sur les données et une liaison de données unidirectionnelle, et son expérience est bien meilleure que la page H5. Cela est dû à la prise en charge de l'environnement WeChat et au traitement du chargement de toutes les pages en même temps. fois lors de la première course. Cet article partagera la pratique consistant à tirer vers le bas pour actualiser et à faire glisser vers le haut pour charger les mini-listes de programmes WeChat.

Rendus

Jetons d'abord un coup d'œil aux rendus du programme Les quatre images suivantes sont de gauche à droite : Venez. Animations vers le bas et l'actualisation, résultats d'actualisation déroulants, animations de chargement par balayage vers le haut et résultats de chargement par balayage vers le haut. Les données du programme sont toutes des données simulées et n'incluent pas les requêtes réseau, elles peuvent donc être exécutées directement.

Méthode 1 : Utiliser le composant scroll-view pour implémenter

Puisque cette méthode d'implémentation n'a pas été choisie en fin de compte (l'actualisation déroulante a des bugs), je ne donnerai donc qu'une brève introduction. Bien sûr, s'il n'y a pas besoin d'actualisation déroulante, le composant scroll-view est très pratique pour restituer la liste. Comme le montre la documentation officielle, le composant scroll-view intègre les méthodes suivantes pour fournir une programmation très pratique.

scroll-into-view String La valeur doit être un certain identifiant de sous-élément, puis faites défiler jusqu'à l'élément, et le haut de l'élément sera aligné avec le haut du défilement zone
bindscrolltoupper EventHandle scroll Lors du défilement vers le haut/gauche, l'événement scrolltoupper
bindscrolltolower EventHandle sera déclenché lors du défilement vers le bas. /right, l'événement scrolltolower
bindscroll EventHandle sera déclenché Déclenché lors du défilementevent.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

Méthode 2 : utilisez la fonction fournie avec la fonction page

Page() pour enregistrer une page. Accepte un paramètre d'objet, qui spécifie les données initiales de la page, les fonctions de cycle de vie, les fonctions de gestion des événements, etc.

1. Définissez la couleur de premier plan de la fenêtre sur sombre sur la page app.json et autorisez la liste déroulante

"window":{
  "backgroundTextStyle":"dark",
  "navigationBarBackgroundColor": "#000",
  "navigationBarTitleText": "wechat",
  "navigationBarTextStyle":"white",
  "enablePullDownRefresh": true
}

2. Définir pour autoriser la liste déroulante sur la page list.json

{
  "enablePullDownRefresh": true
}

3. Utilisez onPullDownRefresh pour surveiller l'action déroulante de l'utilisateur

Remarque : lors du défilement de la vue défilante, la page ne pourra pas rebondir, donc le défilement dans le défilement -view ne peut pas déclencher onPullDownRefresh, utilisez donc le composant scroll-view. Cette fonctionnalité de la page ne peut pas être utilisée.

onPullDownRefresh: function() {
 wx.showNavigationBarLoading() //在标题栏中显示加载
 let newwords = [{message: '从天而降',viewid:'-1',time:util.formatTime(new Date),greeting:'hello'}].concat(this.data.words);
 setTimeout( ()=> {
   this.setData({
     words: newwords
   })
   wx.hideNavigationBarLoading() //完成停止加载
   wx.stopPullDownRefresh() //停止下拉刷新
  }, 2000)
}

4. Utilisez la page onReachBottom pour afficher l'événement inférieur

Remarque : lors de la première connexion à la page, si la page n'est pas pleine d'un écran, onReachBottom sera déclenché uniquement lorsque l'utilisateur tire activement vers le haut, onReachBottom le sera. déclenché plusieurs fois. Il doit être déclenché une fois et une seule fois, donc lors de la programmation, ces deux points doivent être pris en considération.

onReachBottom:function(){
  console.log('hi')
  if (this.data.loading) return;
  this.setData({ loading: true });
  updateRefreshIcon.call(this);
  var words = this.data.words.concat([{message: '土生土长',viewid:'0',time:util.formatTime(new Date),greeting:'hello'}]);
  setTimeout( () =>{
    this.setData({
     loading: false,
     words: words
    })
  }, 2000)
 }
})

5. Télécharger l'animation de l'icône

/**
 * 旋转刷新图标
 */
function updateRefreshIcon() {
 var deg = 0;
 console.log('旋转开始了.....')
 var animation = wx.createAnimation({
  duration: 1000
 });
 var timer = setInterval( ()=> {
  if (!this.data.loading)
   clearInterval(timer);
  animation.rotateZ(deg).step();//在Z轴旋转一个deg角度
  deg += 360;
  this.setData({
   refreshAnimation: animation.export()
  })
 }, 2000);
}

Enfin ci-joint le code de mise en page :

<view wx:for="{{words}}" class="item-container">
  <view class="items">
    <view class="left">
       <view class="msg">{{item.message}}</view>
       <view class="time">{{item.time}}</view>
    </view>
    <view class="right">{{item.greeting}}</view>
  </view>
</view>
<view class="refresh-block" wx:if="{{loading}}">
 <image animation="{{refreshAnimation}}" src="../../resources/refresh.png"></image>
</view>

Recommandations associées :

Résumé de l'actualisation de la page JS de méthodes

À propos du problème de rafraîchissement automatique de la page après avoir cliqué sur le bouton

Explication détaillée de l'exemple de rafraîchissement de la page en Javascript

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!