Einführung in die Scroll-Ansichtskomponente

Scroll-View ist eine scrollbare Ansichtskomponente, die vom WeChat-Applet bereitgestellt wird. Ihre Hauptfunktion besteht darin, Listenseiten per Pull-Up zu laden und zu aktualisieren, die h?ufig auf Mobilger?ten zu sehen sind Nehmen wir als Beispiel ?ffnen Sie auf unserer Applet-Seite die Projektkonfigurationsdatei app.json im Stammverzeichnis des Projekts, fügen Sie ?pages/allJoke/allJoke“ zum darin enthaltenen Seitenarray hinzu, legen Sie dann die untere Navigation fest und fügen Sie Folgendes hinzu:

Wenn Sie die Bedeutung der spezifischen Konfiguration wissen m?chten, k?nnen Sie auf das Miniprogramm-Konfigurationsdokument verweisen, ich werde hier nicht auf Details eingehen!

json-Konfigurationsseite

{
  "text": "列表",
  "pagePath": "pages/allJoke/allJoke",
  "iconPath": "images/note.png",
  "selectedIconPath": "images/noteHL.png"
 },

Der n?chste Schritt ist die Konfigurationsseite unserer neuen Seite. Erstellen Sie ein neues Verzeichnis unter dem Seitenverzeichnis, z. B. alljoke, und erstellen Sie dann eine neue allJoke.json in dieses Verzeichnis Diese Datei:

Da wir das Applet sp?ter für die Pulldown-Aktualisierung verwenden müssen, ist die Methode ?enablePullDownRefresh“ im Konfigurationselement aktiviert Titel der Seite, den Sie nach Belieben festlegen k?nnen oder nicht!

wxml-Ansichtsseite

{
  "navigationBarTitleText": "笑話集錦",
  "enablePullDownRefresh": true
}

Die Ansichtsseite ist an der Reihe. Erstellen Sie auf ?hnliche Weise eine neue alljoke.wxml-Seite im alljoke-Verzeichnis .wxml ist ein vom Mini-Programm erstellter Ansichtsseiten-Dokumenttyp, dessen Schreibmethode für das Frontend nicht schwierig ist. Wenn Sie mehr wissen m?chten, k?nnen Sie auch das wxml-Dokument lesen Kopieren Sie den folgenden Code in alljoke.wxml

Wie Sie sehen k?nnen, macht unsere Protagonisten-Bildlaufansicht hier auch eine lange Liste von Konfigurationen, lassen Sie es mich tun Sprechen Sie über die Funktionen dieser Konfigurationen!

<view>
 <view>
  <scroll-view class="scroll" scroll-top="{{scrollTop}}" style="height:580px;" scroll-y="true" bindscroll="scrll"  bindscrolltolower="loadMore">
   <view class="block" wx:for="{{listLi}}" wx:for-item="item">
    <text>{{item.text}}</text>
   </view>  
  </scroll-view>
 </view>
 <view class="top" hidden="{{hidden}}" catchtap="goTop">?</view>
</view>

Die verwendeten Optionen sind alle aufgeführt, und es gibt noch eine Sache, auf die Sie besonders achten müssen:

Verwenden Sie beim Verschieben der Bildlaufleiste eine feste H?he für die Komponente. Dies ist die im Codestil oben festgelegte H?he.

Weitere Informationen finden Sie in der Bildlaufansichtskomponente des WeChat-Applets! Dokument

wxss-Stil

Erstellen Sie auf ?hnliche Weise eine neue allJoke.wxss-Datei im alljoke-Verzeichnis. Der Stil des Miniprogramms ?hnelt dem von herk?mmlichem CSS. Sie k?nnen es nach Ihren eigenen Wünschen gestalten. Hier habe ich einfach einen Stil gemacht, der h?sslich ist, also kannst du ihn einfach verwenden (Titel Fremdsprache: Ich kann es nicht ertragen und genug Essen und Kleidung selbst herstellen)

Einführung in Stile in der Mini-Programmdokumentation

Logikteil

.block {
  border: 8px solid #71b471;
  margin: 20rpx 20rpx;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
  text-align: center;
}
.top {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  position: fixed;
  bottom: 40rpx;
  right: 20rpx;
  text-align: center;
  font-size: 50rpx;
  opacity: .8;
  border-radius: 50%;
  border: 1px solid #fff; 
}

Kommen wir zum letzten und wichtigsten Logikteil! Die alte Regel besteht darin, eine neue allJoke.js-Datei im alljoke-Verzeichnis zu erstellen. Fügen Sie zuerst den Code ein und erkl?ren Sie es dann langsam:

Wie Sie sehen k?nnen, müssen wir zuerst die Funktion page() verwenden, um die Seite zu registrieren, und dann einige in den Daten definieren. OnLoad ist der Lebenszyklus Funktion dieser Seite, die aufgerufen wird, wenn die Seite geladen wird. Diese Funktion empf?ngt zwei Parameter, der erste Parameter ist die zu ladende Seite, der zweite Parameter ist ein boolescher Wert , die verwendet wird, um zu bestimmen, ob die Funktion zum Pulldown-Aktualisieren oder beim Laden der Seite aufgerufen wird! Als n?chstes ist onPullDownRefresh die vom Applet bereitgestellte Pulldown-Aktualisierungsfunktion. Darin zeigt wx.showToast die Nachricht an Eingabeaufforderungsfeld. LoadMore ist ein Ereignis, das beim Scrollen nach unten ausgel?st wird. Wenn alle Listenelemente geladen wurden, wird es zurückgegeben. Wenn noch Listenelemente in der Datenbank vorhanden sind, ziehen Sie sie nach unten, um die n?chste Seite zu laden. Sie k?nnen sehen, dass diese Funktion ermittelt, ob die Position der Bildlaufleiste gr??er als 600 ist . Wenn es gr??er als 600 ist, wird die Schaltfl?che angezeigt, die nach unten geht. Wenn es kleiner als 600 ist, wird die Schaltfl?che ausgeblendet, die nach oben geht. Gleichzeitig werden die Parameter der Bildlaufleiste angezeigt Wir haben gerade beim Thema WXML erw?hnt, dass die Seite nicht neu gerendert wird, wenn die Scroll-View-Komponente das Einstellungselement für die Position der vertikalen Bildlaufleiste festlegt . Wenn die Scroll-Funktion beim Scrollen ausgel?st wird, muss die Position ?0“ sein, da die Scroll-Funktion wiederholt aktiviert wird Mit anderen Worten, aufgrund der Positionseinstellung werden alle Parameter unver?ndert auf ?1“ gesetzt, was dazu führt, dass das Scroll-Top-Einstellungselement nicht wirksam wird, da die goTop-Funktion direkt nach oben geht (?nderung des Parameters auf ?0“). bietet eine M?glichkeit). Schlie?lich gibt es noch die Funktion, die direkt zur oberen Schaltfl?che wechselt, wie Sie sehen k?nnen. Sie ?ndert die Standortinformationen auf ?0“, ?ndert die Einstellung des Parameters ?Scroll-Top“, damit sie wirksam wird, und die Seite wechselt direkt zu Die Oberseite wird schlie?lich ausgeblendet (die Schaltfl?che, die direkt nach oben führt), indem der ausgeblendete Parameter ge?ndert wird. Down-Refresh-Funktion der Pull-Up-Listenseite. Aus dem Obigen k?nnen wir ersehen, dass die von WeChat bereitgestellten Schnittstellen und APIs im Allgemeinen einfacher sind als die native JS-Implementierung ??>Vielen Dank fürs Lesen, ich hoffe, es kann allen helfen, vielen Dank für Ihre Unterstützung dieser Seite!

Weitere Artikel zum Beispielcode für die Implementierungsliste der WeChat-Applet-Scroll-View-Komponenten finden Sie auf der chinesischen PHP-Website!

Page({
 data:{
  listLi:[],
  page:1,
  scrollTop:0,
  done: false,
  hidden: true
 },
 onLoad:function(options){
  this.getList(1);
 },
 
 onPullDownRefresh: function(){
  wx.showToast({
   title: '加載中',
   icon: 'loading'
  });
  this.getList(1,true);
 },
 
 getList: function(page, stopPull){
  var that = this
  wx.request({
   url: 'https://wechat.sparklog.com/jokes',
   data: {
    page: page,
    per: '20'
   },
   method: 'GET', 
   success: function(res){
    if(page===1){
     that.setData({
      page: page+1,
      listLi: res.data,
      done: false
     })
     if(stopPull){
      wx.stopPullDownRefresh()      
     }
    }else{
     if(res.data<20){
      that.setData({
       page: page+1,
       listLi: that.data.listLi.concat(res.data),
       done: true
      }) 
     }else{
      that.setData({
       page: page+1,
       listLi: that.data.listLi.concat(res.data)
      }) 
     }  
    }
   },
  })
 },
 
 loadMore: function(){
  var done = this.data.done;
  if(done){
   return
  }else{
   wx.showToast({
    title: &#39;加載中&#39;,
    icon: &#39;loading&#39;,
    duration: 500
   });
   var page = this.data.page;
   this.getList(page)
  }
 },
 
 scrll: function(e){
  var scrollTop = e.detail.scrollTop
  if(scrollTop>600){
   this.setData({
    scrollTop: 1,
    hidden: false   
   })
  }else{
   this.setData({
    scrollTop: 1,
    hidden: true 
   });
  }
 },
 
 goTop: function(){
  this.setData({
   scrollTop:0,
   hidden: true
  })
 }
})