Heim > WeChat-Applet > Mini-Programmentwicklung > WeChat-Applet-Listen-Pulldown-Aktualisierungs-Pullup-Ladebeispielcode

WeChat-Applet-Listen-Pulldown-Aktualisierungs-Pullup-Ladebeispielcode

小云云
Freigeben: 2018-02-03 09:02:21
Original
3486 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das WeChat-Applet zum Implementieren der Pulldown-Aktualisierung und des Pullup-Ladens vorgestellt. Interessierte Freunde können darauf verweisen.

DEMO-Download

Rendering

WeChat-Applet-Listen-Pulldown-Aktualisierungs-Pullup-Ladebeispielcode

Prinzip

Verwendung Die onPullDownRefresh-Funktion (Pull-Down-Refresh-Listening-Funktion) und die onReachBottom-Funktion (Pull-Up-Load-Listening-Funktion) des WeChat-Applets überwachen die Pull-Down- und Pull-Up-Dynamik der Seite und ändern so die Seitendaten!

Seitenkonfiguration JSON

  • enablePullDownRefresh: Pulldown-Aktualisierung aktivieren; onReachBottomDistance: Der Abstand vom unteren Rand der Seite, wenn das Pull-to-Bottom-Ereignis der Seite ausgelöst wird, in Pixel.


WXML

{
 "enablePullDownRefresh": true,
 "onReachBottomDistance": 50
}
Nach dem Login kopieren

JS

SetTimeout wird hier verwendet, um das Anfordern von Daten zu simulieren.
<view class="tui-content">
 <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view>
</view>
Nach dem Login kopieren
Das Laden von Daten ist auf drei Mal begrenzt, und der Aufruf von wx.showToast zeigt, dass keine Daten mehr vorhanden sind.




Zusammenfassung

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;,
  })
 }
 }
})
Nach dem Login kopieren

Muss wx.stopPullDownRefresh() verwenden, um den Pull-Vorgang nach Abschluss jeder Datenanforderung zu stoppen herunter, um sich zu erfrischen. Verwandte Empfehlungen:

Implementierung von Pull-up-Laden und Pull-down-Aktualisierung der WeChat-Applet-Liste

Das obige ist der detaillierte Inhalt vonWeChat-Applet-Listen-Pulldown-Aktualisierungs-Pullup-Ladebeispielcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage