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

韦小宝
Libérer: 2023-03-21 12:48:02
original
10435 Les gens l'ont consulté

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() //停止下拉刷新
          }
    })
Copier après la connexion

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

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

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

  Attributs
index.wxml
Copier après la connexion
<!--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>
Copier après la connexion
Type

Description
bindscrolltoupperEventHandle
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");
  }
})
Copier après la connexion
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;
}
Copier après la connexion




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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal