Eine kurze Diskussion darüber, wie die Pull-Down-Aktualisierungs- und Pull-Up-Ladefunktionen in Miniprogrammen implementiert werden? (mit Code)

In diesem Artikel erfahren Sie, wie Sie die Pull-Down-Aktualisierungs- und Pull-Up-Ladefunktionen im Miniprogramm implementieren. Ich hoffe, er wird Ihnen hilfreich sein!

Wenn beim Anzeigen von Listendaten viele Daten vorhanden sind oder diese schnell aktualisiert werden, müssen Sie Pull-Up-Aktualisierungs- und Pull-Down-Ladefunktionen bereitstellen, um die Benutzererfahrung zu verbessern. [Verwandte Lernempfehlungen: Mini-Programmentwicklungs-Tutorial]

Pull-Down-Aktualisierung und Pull-Up-Laden von WXML-Dateien beim Schreiben

Wenn wir die Scroll-View-Schiebekomponente zum Anzeigen der Liste verwenden, gibt es ein Pulldown Aktualisierung und Pull-up-Laden an sich Triggerfunktion

<scroll-view class="scroll" scroll-y="{{true}}" upper-threshold="50"   
bindscrolltoupper="refresh"  style="height:700px">
  <l-loadmore show="{{upfresh}}" bindscrolltolower="getMore"  type="loading" loading-text="拼命刷新中">
</l-loadmore>

<l-loadmore show="{{downfresh}}" type="loading" loading-text="拼命加载中">
</l-loadmore>

• scroll-y: Ob vertikales Scrollen erlaubt werden soll, der Standardwert ist false, hier setzen wir es auf true
• upper-threshold: Wie weit von oben/links entfernt ist löst das scrolltoupper-Ereignis aus (zum Aktualisieren nach unten ziehen)
• bindscrolltoupper: scroll Wird beim Scrollen nach oben/links ausgelöst. Legen Sie hier die Funktion fest, die beim Scrollen nach oben/links ausgelöst werden soll.
• bindscrolltolower: Wird beim Scrollen nach oben/rechts ausgelöst

Einführung in das Line-UI-Framework

Hier verwende ich die Pull-Down-Aktualisierung und Pull-Up. Die Ladeanzeigekomponente wird vom Lin-UI-Framework bereitgestellt. Hier werde ich darüber sprechen, wie man das Lin einführt -ui-Framework:

Offizielle Lin-UI-Dokumentadresse

//在小程序项目目录中执行下面的函数
npm install lin-ui

Fügen Sie es dann in die JSON-Datei der Seite ein, auf der die Komponente eingeführt werden muss

"usingComponents": {
    "l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index",
    "l-loading":"/miniprogram_npm/lin-ui/loading/index",
  },

Auf diese Weise wurde die Lin-UI-Komponente erfolgreich eingeführt

JS-Code schreiben

data: {
    downfresh:false,//底部加载展示控制
    upfresh:false//顶部加载展示控制
  },

Stellen Sie zunächst ein, ob die Ladekomponente in den Daten angezeigt wird. Standardmäßig wird sie nicht angezeigt.

Ziehen Sie nach unten, um den JS-Code zu aktualisieren Laden von js-Code

//下拉刷新
refresh(){
    if(this.data.upfresh){
      console.log("还没刷新完成")
      return;
    }
    var that = this;
    this.setData({
      upfresh: true,
      // upfresh:false
    })
   
    setTimeout(function() {
      //updateData为自己的数据更新逻辑代码
      that.updateData(true,()=>{
        that.setData({
          upfresh: false,
      });
     })
      // wx.hideLoading();
    console.info('下拉刷新加载完成.');
  }, 500);
  },
    
      //更新数据
   updateData:function(tail, callback) {
  
    var that = this;
    console.log("updatedata-=-=seea"+that.data.searchValue)
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: 0,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        this.setData({
          componys: res.data
        })
        if (callback) {
          callback();
        }
      }
    })
   },

Wir haben bereits die gesamten Pulldown-Aktualisierungs- und Pullup-Ladefunktionen implementiert. Wir verwenden hauptsächlich die Komponenteneigenschaften der Scroll-Ansicht, um die Anzeige und Ausblendung der aufgezeichneten Komponenten entsprechend dem Auslösezeitpunkt zu steuern. Die Gesamtimplementierung ist nicht sehr schwierig, der spezifische Code kann entsprechend Ihrer tatsächlichen Situation angepasst werden. Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie die Pull-Down-Aktualisierungs- und Pull-Up-Ladefunktionen in Miniprogrammen implementiert werden? (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!