Detaillierte 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!