Explication détaillée de la mise en œuvre de l'applet WeChat pour le chargement déroulant et l'actualisation pull-up

Cet article parle de l'implémentation du chargement déroulant et de l'actualisation pull-up par l'applet WeChat, si vous ne connaissez pas l'implémentation du chargement déroulant et de l'actualisation pull-up par l'applet WeChat, ou si vous l'êtes. Si vous êtes intéressé par la mise en œuvre du chargement déroulant et de l'actualisation pull-up par l'applet WeChat, alors jetons un coup d'œil à cet article ensemble. Bon, sans plus tarder, allons droit au but

Deux implémentations. méthodes d'actualisation déroulante et de chargement pull-up des mini-programmes WeChat

Méthode 1 : les méthodes onPullDownRefresh et onReachBottom implémentent le chargement déroulant et l'actualisation pull-up des mini-programmes

Définissez d'abord l'attribut window dans le fichier json

属性	类型	描述
enablePullDownRefresh	Boolean	是否开启下拉刷新，详见页面相关事件处理函数。

                                                                                                                                                                                                                                     Parce que solide #C0C0C0;border-collapse:collapse;">

Type

                                                                                                                                                                                                     ;border-collapse:collapse;">enablePullDownRefresh

属性	类型	描述
onPullDownRefresh	function	页面相关事件处理函数——监听用户下拉动作
onReachBottom	function	页面上拉触发底事件的处理函数

Booléen

Si vous souhaitez activer l'actualisation déroulante, veuillez vous référer à la page pour plus de détails sur la fonction Gestion des événements.

Définissez les méthodes onPullDownRefresh et onReachBottom dans js tr> tbody>

Propriétés	Type	Description
onPullDownRefresh	fonction td >	Fonction de traitement des événements liés à la page - surveiller les actions déroulantes de l'utilisateur
onReachBottom	fonction	Fonction de gestion de l'événement inférieur de déclenchement d'extraction de page

Instructions de chargement du menu déroulant :

Après le traitement de l'actualisation des données, wx.stopPullDownRefresh peut arrêter l'actualisation du menu déroulant de la page actuelle.

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() //停止下拉刷新
          }
    })

Méthode 2 :

Définissez bindscrolltoupper et bindscrolltolower dans la vue de défilement pour implémenter la liste déroulante de l'applet WeChat

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

　 Attributs

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

Description

bindscrolltoupper

EventHandle

Faites défiler vers le haut/la gauche , l'événement scrolltoupper sera déclenché

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

Faites défiler vers le bas/à droite, L'événement scrolltolower sera déclenché

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

Ce qui précède représente tout le contenu de cet article. Je n'y connais pas grand-chose, vous pouvez le lire vous-même. Plus vous comprendrez les deux côtés, plus il vous sera facile de le maîtriser ! Recommandations associées : L'applet WeChat implémente le partage de code d'image avec zoom au doigt

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!