Analyse der Implementierungsmethode der Pulldown-Aktualisierung und des Pullup-Ladens der WeChat-Applet-Liste

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode der Listen-Pulldown-Aktualisierung und des Pullup-Ladens der WeChat-Applet-Listen-Rendering-Funktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Das WeChat-Applet hat ein spezielles Label für den 9. Januar 2017, das im Internet und im Freundeskreis schnell populär wurde Ich habe auch ein Demoprogramm geschrieben. Erleben Sie es. Das WeChat-Applet ähnelt in gewisser Weise Vuejs, beide sind datengesteuerte Ansichten und eine unidirektionale Datenbindung, und die Erfahrung ist viel besser als bei der H5-Seite. Dies ist auf die Unterstützung der WeChat-Umgebung und die Verarbeitung des gleichzeitigen Ladens aller Seiten zurückzuführen Zeit beim ersten Laufen. In diesem Artikel erfahren Sie, wie Sie zum Aktualisieren nach unten ziehen und zum Laden der WeChat-Miniprogrammlisten nach oben wischen.

Renderings

Werfen wir zunächst einen Blick auf die Programm-Renderings, von links nach rechts: Komm Down- und Refresh-Animationen, Pulldown-Aktualisierungsergebnisse, Upswipe-Ladeanimationen und Upswipe-Ladeergebnisse Die Daten im Programm sind alle simulierte Daten und enthalten keine Netzwerkanforderungen, sodass sie direkt ausgeführt werden können.

Methode 1: Scroll-View-Komponente zum Implementieren verwenden

Da diese Implementierungsmethode nicht gewählt wurde Zum Schluss (Pulldown-Aktualisierung hat Fehler), daher werde ich nur eine kurze Einführung geben. Wenn keine Pulldown-Aktualisierung erforderlich ist, ist die Scroll-Ansichtskomponente zum Rendern der Liste sehr praktisch Aus der offiziellen Dokumentation geht hervor, dass die Scroll-View-Komponente die folgenden Methoden integriert, um die Programmierung zu ermöglichen Sehr bequem.

scroll-into-view String Der Wert sollte eine bestimmte Unterelement-ID sein. Scrollen Sie dann zum Element, und der obere Rand des Elements wird am oberen Rand des Bildlaufs ausgerichtet Bereich
bindscrolltoupper EventHandle scroll Beim Scrollen nach oben/links wird das scrolltoupper -Ereignis
bindscrolltolower EventHandle ausgelöst /right, das scrolltolower Ereignis
bindscroll EventHandle wird ausgelöst Ausgelöst beim Scrollenevent.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

Methode 2: Verwenden Sie Funktion, die mit der Seite

Page()-Funktion zum Registrieren einer Seite geliefert wird. Akzeptiert einen Objektparameter, der die Anfangsdaten der Seite, Lebenszyklusfunktionen, Ereignisbehandlungsfunktionen usw. angibt.

1. Stellen Sie die Vordergrundfarbe des Fensters auf der app.json-Seite auf dunkel und erlauben Sie das Dropdown-Menü

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

2. Dropdown auf der list.json-Seite zulassen

{
  "enablePullDownRefresh": true
}

3. Verwenden Sie onPullDownRefresh, um die Pulldown-Aktion des Benutzers zu überwachen

Hinweis: Beim Scrollen in der Scroll-Ansicht wird verhindert, dass die Seite zurückspringt, also beim Scrollen -view kann onPullDownRefresh nicht auslösen. Verwenden Sie daher die Scroll-View-Komponente. Diese Funktion der Seite kann nicht verwendet werden.

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. Verwenden Sie die onReachBottom-Seite, um das unterste Ereignis aufzurufen

Hinweis: Wenn die Seite zum ersten Mal nicht voll ist, wird onReachBottom nur ausgelöst, wenn der Benutzer aktiv nach oben zieht Es sollte mehrmals aufgerufen und nur einmal ausgelöst werden. Bei der Programmierung müssen diese beiden Punkte berücksichtigt werden.

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. Symbolanimation hochladen

/**
 * 旋转刷新图标
 */
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);
}

Schließlich ist der Layoutcode beigefügt:

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

Verwandte Empfehlungen:

Zusammenfassung der JS-Seitenaktualisierung von Methoden

Über das Problem der automatischen Seitenaktualisierung nach dem Klicken auf die Schaltfläche

Detailliertes Beispiel für die Aktualisierung der Seite in Javascript

Das obige ist der detaillierte Inhalt vonAnalyse der Implementierungsmethode der Pulldown-Aktualisierung und des Pullup-Ladens der WeChat-Applet-Liste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!