suchen
HeimBackend-EntwicklungPHP-TutorialDetaillierte Erläuterung der WeChat-Applet-Implementierung des Pulldown-Ladens und Pullup-Aktualisierens

In diesem Artikel geht es um die Implementierung von Pull-Down-Laden und Pull-Up-Aktualisierung durch das WeChat-Applet. Wenn Sie nichts über die Implementierung von Pull-Down-Laden und Pull-Up-Aktualisierung durch das WeChat-Applet wissen Wenn Sie sich für die Implementierung von Pulldown-Laden und Pullup-Aktualisierung durch das WeChat-Applet interessieren, schauen wir uns diesen Artikel gemeinsam an. Kommen wir ohne weitere Umschweife zum Punkt

Zwei Implementierungen Methoden für die Pulldown-Aktualisierung und das Pullup-Laden von WeChat-Miniprogrammen

Methode 1: Die Methoden onPullDownRefresh und onReachBottom implementieren das Pulldown-Laden und Pullup-Aktualisieren von Miniprogrammen

Setzen Sie zuerst das Fensterattribut in der JSON-Datei ein

            属性   类型                           描述
enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数。
                                                                                                                                                                                                                 solid #C0C0C0;border-collapse:collapse;">

Type

Beschreibung; Grenzkollapse: Zusammenbruch;"> enablePulldownRefresh
    属性    类型          描述
onPullDownRefresh function 页面相关事件处理函数——监听用户下拉动作
onReachBottom function 页面上拉触发底事件的处理函数
Boolean Ob die Pulldown-Aktualisierung aktiviert werden soll, finden Sie auf der Seite für Einzelheiten zur Funktion Ereignisbehandlung.
Legen Sie die Methoden onPullDownRefresh und onReachBottom in js fest tr> tbody>
  Properties Typ Beschreibung
onPullDownRefresh function td > Seitenbezogene Ereignisverarbeitungsfunktion – Benutzer-Pulldown-Aktionen überwachen
onReachBottom Funktion Verarbeitungsfunktion für Seiten-Pull-up-Trigger-Bottom-Ereignis

Pulldown-Ladeanweisungen:

Nach der Verarbeitung der Datenaktualisierung kann wx.stopPullDownRefresh die Pulldown-Aktualisierung der aktuellen Seite stoppen.

onPullDownRefresh(){
  console.log('--------下拉刷新-------')
  wx.showNavigationBarLoading() //在标题栏中显示加载
 
  wx.request({
          url: 'https://URL',
          data: {},
          method: 'GET',
         // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          // header: {}, // 设置请求的 header
          success: function(res){
            // success
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
            wx.hideNavigationBarLoading() //完成停止加载
            wx.stopPullDownRefresh() //停止下拉刷新
          }
    })

Methode 2:

Bindscrolltoupper und bindscrolltolower in der Bildlaufansicht festlegen, um das WeChat-Applet-Dropdown zu implementieren

    属性    类型          描述
bindscrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle

滚动到底部/右边,会触发 scrolltolower 事件

  Attribute
index.wxml
<!--index.wxml-->
<view class="container" style="padding:0rpx">
  <!--垂直滚动,这里必须设置高度-->
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
        class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll">
        <view class="item" wx:for="{{list}}">
            <image class="img" src="{{item.pic_url}}"></image>
            <view class="text">
                <text class="title">{{item.name}}</text>
                <text class="description">{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view class="body-view">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...
        </loading>
    </view>
</view>
Type

Beschreibung
bindscrolltoupper EventHandle
Nach oben/links scrollen , wird das scrolltoupper-Ereignis ausgelöst
var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;


// 请求数据
var loadMore = function(that){
    that.setData({
        hidden:false
    });
    wx.request({
        url:url,
        data:{
            page : page,
            page_size : page_size,
            sort : sort,
            is_easy : is_easy,
            lange_id : lange_id,
            pos_id : pos_id,
            unlearn : unlearn
        },
        success:function(res){
            //console.info(that.data.list);
            var list = that.data.list;
            for(var i = 0; i < res.data.list.length; i++){
                list.push(res.data.list[i]);
            }
            that.setData({
                list : list
            });
            page ++;
            that.setData({
                hidden:true
            });
        }
    });
}
Page({
  data:{
    hidden:true,
    list:[],
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(){
    //   这里要注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
      var that = this;
      wx.getSystemInfo({
          success:function(res){
              that.setData({
                  scrollHeight:res.windowHeight
              });
          }
      });
       loadMore(that);
  },
  //页面滑动到底部
  bindDownLoad:function(){   
      var that = this;
      loadMore(that);
      console.log("lower");
  },
  scroll:function(event){
    //该方法绑定了页面滚动时的事件,我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
     this.setData({
         scrollTop : event.detail.scrollTop
     });
  },
  topLoad:function(event){
    //   该方法绑定了页面滑动到顶部的事件,然后做上拉刷新
      page = 0;
      this.setData({
          list : [],
          scrollTop : 0
      });
      loadMore(this);
      console.log("lower");
  }
})
bindscrolltolower

EventHandle

Nach unten/rechts scrollen, Das scrolltolower-Ereignis wird ausgelöst

index.js
/**index.wxss**/

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

/**/

scroll-view {
  width: 100%;
}

.item {
  width: 90%;
  height: 300rpx;
  margin: 20rpx auto;
  background: brown;
  overflow: hidden;
}

.item .img {
  width: 430rpx;
  margin-right: 20rpx;
  float: left;
}

.title {
  font-size: 30rpx;
  display: block;
  margin: 30rpx auto;
}

.description {
  font-size: 26rpx;
  line-height: 15rpx;
}




index.wxss

Das Obige ist der gesamte Inhalt dieses Artikels. Wenn Sie nicht viel darüber wissen, können Sie es selbst lesen. Je mehr Sie beide Seiten kennen, desto einfacher wird es, es zu meistern! Verwandte Empfehlungen: WeChat-Applet implementiert Finger-Zoom-Bildcode-Sharing

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der WeChat-Applet-Implementierung des Pulldown-Ladens und Pullup-Aktualisierens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
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
Zweck von PHP: Erstellen dynamischer WebsitesZweck von PHP: Erstellen dynamischer WebsitesApr 15, 2025 am 12:18 AM

PHP wird verwendet, um dynamische Websites zu erstellen. Zu den Kernfunktionen gehören: 1. Dynamische Inhalte generieren und Webseiten in Echtzeit generieren, indem Sie eine Verbindung mit der Datenbank herstellen; 2. Verarbeiten Sie Benutzerinteraktions- und Formulareinreichungen, überprüfen Sie Eingaben und reagieren Sie auf Operationen. 3. Verwalten Sie Sitzungen und Benutzerauthentifizierung, um eine personalisierte Erfahrung zu bieten. 4. Optimieren Sie die Leistung und befolgen Sie die Best Practices, um die Effizienz und Sicherheit der Website zu verbessern.

PHP: Datenbanken und serverseitige Logik bearbeitenPHP: Datenbanken und serverseitige Logik bearbeitenApr 15, 2025 am 12:15 AM

PHP verwendet MySQLI- und PDO-Erweiterungen, um in Datenbankvorgängen und serverseitiger Logikverarbeitung zu interagieren und die serverseitige Logik durch Funktionen wie Sitzungsverwaltung zu verarbeiten. 1) Verwenden Sie MySQLI oder PDO, um eine Verbindung zur Datenbank herzustellen und SQL -Abfragen auszuführen. 2) Behandeln Sie HTTP -Anforderungen und Benutzerstatus über Sitzungsverwaltung und andere Funktionen. 3) Verwenden Sie Transaktionen, um die Atomizität von Datenbankvorgängen sicherzustellen. 4) Verhindern Sie die SQL -Injektion, verwenden Sie Ausnahmebehandlung und Schließen von Verbindungen zum Debuggen. 5) Optimieren Sie die Leistung durch Indexierung und Cache, schreiben Sie hochlesbarer Code und führen Sie die Fehlerbehandlung durch.

Wie verhindern Sie die SQL -Injektion in PHP? (Vorbereitete Aussagen, PDO)Wie verhindern Sie die SQL -Injektion in PHP? (Vorbereitete Aussagen, PDO)Apr 15, 2025 am 12:15 AM

Die Verwendung von Vorverarbeitungsanweisungen und PDO in PHP kann SQL -Injektionsangriffe effektiv verhindern. 1) Verwenden Sie PDO, um eine Verbindung zur Datenbank herzustellen und den Fehlermodus festzulegen. 2) Erstellen Sie Vorverarbeitungsanweisungen über die Vorbereitungsmethode und übergeben Sie Daten mit Platzhaltern und führen Sie Methoden aus. 3) Abfrageergebnisse verarbeiten und die Sicherheit und Leistung des Codes sicherstellen.

PHP und Python: Code Beispiele und VergleichPHP und Python: Code Beispiele und VergleichApr 15, 2025 am 12:07 AM

PHP und Python haben ihre eigenen Vor- und Nachteile, und die Wahl hängt von den Projektbedürfnissen und persönlichen Vorlieben ab. 1.PHP eignet sich für eine schnelle Entwicklung und Wartung großer Webanwendungen. 2. Python dominiert das Gebiet der Datenwissenschaft und des maschinellen Lernens.

PHP in Aktion: Beispiele und Anwendungen in realer WeltPHP in Aktion: Beispiele und Anwendungen in realer WeltApr 14, 2025 am 12:19 AM

PHP wird in E-Commerce, Content Management Systems und API-Entwicklung häufig verwendet. 1) E-Commerce: Wird für die Einkaufswagenfunktion und Zahlungsabwicklung verwendet. 2) Content -Management -System: Wird für die Erzeugung der dynamischen Inhalte und die Benutzerverwaltung verwendet. 3) API -Entwicklung: Wird für die erholsame API -Entwicklung und die API -Sicherheit verwendet. Durch Leistungsoptimierung und Best Practices werden die Effizienz und Wartbarkeit von PHP -Anwendungen verbessert.

PHP: Erstellen interaktiver Webinhalte mühelosPHP: Erstellen interaktiver Webinhalte mühelosApr 14, 2025 am 12:15 AM

PHP erleichtert es einfach, interaktive Webinhalte zu erstellen. 1) Generieren Sie Inhalte dynamisch, indem Sie HTML einbetten und in Echtzeit basierend auf Benutzereingaben oder Datenbankdaten anzeigen. 2) Verarbeitungsformularübermittlung und dynamische Ausgabe erzeugen, um sicherzustellen, dass HTMLSpecialChars zur Vorbeugung von XSS verwendet wird. 3) Verwenden Sie MySQL, um ein Benutzerregistrierungssystem zu erstellen und Anweisungen von Password_hash und Preprocessing vorzubereiten, um die Sicherheit zu verbessern. Durch die Beherrschung dieser Techniken wird die Effizienz der Webentwicklung verbessert.

PHP und Python: Vergleich von zwei beliebten ProgrammiersprachenPHP und Python: Vergleich von zwei beliebten ProgrammiersprachenApr 14, 2025 am 12:13 AM

PHP und Python haben jeweils ihre eigenen Vorteile und wählen nach den Projektanforderungen. 1.PHP ist für die Webentwicklung geeignet, insbesondere für die schnelle Entwicklung und Wartung von Websites. 2. Python eignet sich für Datenwissenschaft, maschinelles Lernen und künstliche Intelligenz mit prägnanter Syntax und für Anfänger.

Die dauerhafte Relevanz von PHP: Ist es noch am Leben?Die dauerhafte Relevanz von PHP: Ist es noch am Leben?Apr 14, 2025 am 12:12 AM

PHP ist immer noch dynamisch und nimmt immer noch eine wichtige Position im Bereich der modernen Programmierung ein. 1) Einfachheit und leistungsstarke Unterstützung von PHP machen es in der Webentwicklung weit verbreitet. 2) Seine Flexibilität und Stabilität machen es ausstehend bei der Behandlung von Webformularen, Datenbankoperationen und Dateiverarbeitung; 3) PHP entwickelt sich ständig weiter und optimiert, geeignet für Anfänger und erfahrene Entwickler.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software