Funktionsimplementierung des WeChat-Miniprogramms: Zum Laden nach oben schieben und zum Aktualisieren nach unten ziehen

Der Inhalt dieses Artikels befasst sich mit der Implementierung der WeChat-Applet-Funktion: Zum Laden nach oben schieben und zum Aktualisieren nach unten ziehen. Ich hoffe, dass er für Sie hilfreich ist .

Wie bereits erwähnt, werden die Daten beim Laden der Artikelliste auf einmal geladen, was unfreundlich ist. In diesem Kapitel wird das Laden und Aktualisieren vorgestellt.

Stellen Sie zunächst vor, wie der Hochschiebevorgang in der IDE simuliert wird. Zuerst habe ich mit der Maus auf die Artikelliste geklickt und bin dann nach oben gegangen. Es gab kein Ergebnis, ich dachte, mit dem Code stimmt etwas nicht. Tatsächlich nein, Sie müssen nur das Mausrad zum Hochschieben und Herunterziehen verwenden.

Zuerst vervollständigen wir die Slide-Up- und Pull-Down-Funktionen.

list.wxml-Datei:

<view  class="page">
    <view class="page__bd">
        <!--用name 定义模版-->
        <template name="msgTemp">
            <!--
            1. scaleToFill : 图片全部填充显示，可能导致变形 默认
            2. aspectFit ： 图片全部显示，以最长边为准
            3. aspectFill ： 图片全部显示，以最短边为准
            4. widthFix ： 宽不变，全部显示图片
            -->
            <view  class="weui-panel__bd">
                <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                        <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/>
                    </view>
                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                        <view class="weui-media-box__title">{{title}}</view>
                        <view class="weui-media-box__desc">{{time}}</view>
                    </view>
                </navigator>
            </view>
        </template>
        
        <scroll-view scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh"  bindscroll="scroll" bindscrolltolower="pullUpLoad" class="weui-panel weui-panel_access">
            <view class="weui-panel__hd">文章列表</view>
                <view wx:for-items="{{msgList}}" wx:key="{{item.id}}">
                    <view class="kind-list__item">
                        <!--用is 使用模版-->
                        <template is="msgTemp" data="{{...item}}"/>
                    </view>
                </view>
        </scroll-view>
        <view>
            <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...
            </loading>
        </view>
    </view>
    <view class="page__ft">
    </view>
</view>

Basierend auf dem Original verwendet mehr Eine Scroll-Ansicht (offizielles Dokument: https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html) Ich lade die Artikelliste oben,

Der erste Schritt: Scroll-y = true festlegen, damit vertikal gescrollt werden kann,

Der zweite Schritt: Geben Sie eine feste Höhe an, die auch im Dokument eindeutig vorgeschrieben ist. Hier ist die dynamisch ermittelte Höhe und Breite der Mobiltelefonkonfiguration.

Schritt 3: So legen Sie die Antwortmethode von bindscrolltoupper (nach unten ziehen) und bindscrolltolower (nach oben schieben) fest.

Schritt 4: So legen Sie scroll-top (für die Positionierung) und bindscroll (wird beim Scrollen ausgeführt) fest. Ersteres kann zusammen verwendet werden, um einen Positionierungseffekt zu erzielen)

Schritt 5: Laden Sie die Seitensymboleinstellungen und kopieren Sie sie direkt.

list.js-Datei:

// pages/list/list.js
var app = getApp();

// 当前页数
var pageNum = 1;


// 加载数据
var loadMsgData = function(that){
  that.setData({
    hidden:false
  });
  var allMsg = that.data.msgList;
  app.ajax.req('/itdragon/findAll',{
    "page":pageNum , "pageSize" : 6
  },function(res){  
    // 不能直接 allMsg.push(res); 相当于list.push(list);打乱了结构
    for(var i = 0; i < res.length; i++){
      allMsg.push(res[i]);
    }
    that.setData({
      msgList:allMsg
    });
    pageNum ++;
    that.setData({
      hidden:true
    });
  });
}

Page({
  data:{
    msgList:[],
    hidden:true,
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData( {
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    });
    loadMsgData(that);
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  // 下拉刷新数据
  pullDownRefresh: function() {
    var that = this;
    pageNum = 1;
    that.setData({
      msgList : [],
      scrollTop : 0
    });
    loadMsgData(that);
  },

  // 上拉加载数据 上拉动态效果不明显有待改善
  pullUpLoad: function() {
    var that = this;
    loadMsgData(that);
  },
  // 定位数据
  scroll:function(event){
    var that = this;
    that.setData({
      scrollTop : event.detail.scrollTop
    });
 },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

Erster Punkt: Wenn Sie die Methoden in app.ajax.req nicht verstehen, können Sie sich auf Folgendes beziehen: WeChat-Applet-Anfrage (mit entsprechendem Schnittstellen-Quellcode)

Zweiter Punkt: Da es sich um eine Paging-Abfrage handelt, muss der letzte Abfrageinhalt gespeichert werden, daher wird list.push zum Zusammenfügen verwendet.

Der dritte Punkt: Nach jeder Abfrage muss die Anzahl der Seiten um eins erhöht werden und das geladene Symbol muss vor dem Laden angezeigt und nach dem Laden ausgeblendet werden.

Der vierte Punkt: Initialisierung des Ladens der Seite, um Einstellungsinformationen zu erhalten, offizielles Dokument: https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html # wxgetsysteminfoobject

Der fünfte Punkt: Dropdown-Logik, Seitenzahl auf eins setzen, msgList-Inhalt löschen, 0 Pixel von oben positionieren und schließlich die Methode zum Laden von Daten aufrufen .

Der sechste Punkt: Die Logik des Hochrutschens wird direkt aufgerufen. Weil dem Ankerpunkt in der Scorll-Methode ein Wert zugewiesen wurde.

Punkt 7: Wenn Sie meine Schnittstelle aufrufen, kann die App-ID nicht verwendet werden. Sie müssen ein neues Projekt erstellen und keine App-ID auswählen.

Auf diese Weise werden das Laden und die Aktualisierung abgeschlossen. Obwohl ich mit der Aktualisierung nicht zufrieden bin, habe ich im Internet viele Beispiele wie dieses gefunden erleuchte mich.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Implementierungsmethode der Pull-Down-Aktualisierung und des Pull-Up-Ladens im WeChat-Miniprogramm

Die Implementierung des Pull-Down-Ladens und Pull-Up-Aktualisierens des WeChat-Applets wird ausführlich erläutert

Das obige ist der detaillierte Inhalt vonFunktionsimplementierung des WeChat-Miniprogramms: Zum Laden nach oben schieben und zum Aktualisieren nach unten ziehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!