Implémentation de la fonction du mini programme WeChat : faites glisser vers le haut pour charger et déroulez vers le bas pour actualiser

Le contenu de cet article concerne la mise en œuvre de la fonction de l'applet WeChat : faites glisser vers le haut pour charger et déroulez vers le bas pour actualiser. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Comme mentionné précédemment, le chargement des données de la liste d'articles est chargé en une seule fois, ce qui n'est pas convivial. Ce chapitre présente le chargement et l'actualisation.

Présentez d'abord comment simuler l'opération de glissement vers le haut dans l'EDI. Au début, j'ai cliqué sur la liste des articles avec la souris, puis j'ai remonté. Il n'y a eu aucun résultat, je pensais qu'il y avait un problème avec le code. En fait, ce n'est pas le cas. Il vous suffit d'utiliser la molette de la souris pour glisser de haut en bas.

Tout d'abord, complétons les fonctions coulissantes vers le haut et vers le bas.

fichier list.wxml :

<view  class="page">
    <view class="page__bd">
        <!--用name 定义模版-->
        <template name="msgTemp">
            <!--
            1. scaleToFill : 图片全部填充显示，可能导致变形 默认
            2. aspectFit ： 图片全部显示，以最长边为准
            3. aspectFill ： 图片全部显示，以最短边为准
            4. widthFix ： 宽不变，全部显示图片
            -->
            <view  class="weui-panel__bd">
                <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                        <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/>
                    </view>
                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                        <view class="weui-media-box__title">{{title}}</view>
                        <view class="weui-media-box__desc">{{time}}</view>
                    </view>
                </navigator>
            </view>
        </template>
        
        <scroll-view scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh"  bindscroll="scroll" bindscrolltolower="pullUpLoad" class="weui-panel weui-panel_access">
            <view class="weui-panel__hd">文章列表</view>
                <view wx:for-items="{{msgList}}" wx:key="{{item.id}}">
                    <view class="kind-list__item">
                        <!--用is 使用模版-->
                        <template is="msgTemp" data="{{...item}}"/>
                    </view>
                </view>
        </scroll-view>
        <view>
            <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...
            </loading>
        </view>
    </view>
    <view class="page__ft">
    </view>
</view>

Basé sur l'original, An une vue de défilement supplémentaire est utilisée (document officiel : https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html) Je charge la liste d'articles ci-dessus,

La première étape : Définir scroll-y = true pour lui permettre de défiler verticalement,

La deuxième étape Étape : Donner une hauteur fixe, qui est également clairement requise dans le document. Voici la hauteur et la largeur obtenues dynamiquement de la configuration du téléphone mobile.

Étape 3 : Pour définir la méthode de réponse de bindscrolltoupper (dérouler vers le bas) et bindscrolltolower (glisser vers le haut).

Étape 4 : Pour définir le scroll-top (pour le positionnement) et le bindscroll (exécuté lors du défilement, et le premier peut être utilisés ensemble pour obtenir un effet de positionnement)

Étape 5 : Chargez les paramètres de l'icône de la page et copiez-les directement.

fichier list.js :

// pages/list/list.js
var app = getApp();

// 当前页数
var pageNum = 1;


// 加载数据
var loadMsgData = function(that){
  that.setData({
    hidden:false
  });
  var allMsg = that.data.msgList;
  app.ajax.req('/itdragon/findAll',{
    "page":pageNum , "pageSize" : 6
  },function(res){  
    // 不能直接 allMsg.push(res); 相当于list.push(list);打乱了结构
    for(var i = 0; i < res.length; i++){
      allMsg.push(res[i]);
    }
    that.setData({
      msgList:allMsg
    });
    pageNum ++;
    that.setData({
      hidden:true
    });
  });
}

Page({
  data:{
    msgList:[],
    hidden:true,
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData( {
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    });
    loadMsgData(that);
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  // 下拉刷新数据
  pullDownRefresh: function() {
    var that = this;
    pageNum = 1;
    that.setData({
      msgList : [],
      scrollTop : 0
    });
    loadMsgData(that);
  },

  // 上拉加载数据 上拉动态效果不明显有待改善
  pullUpLoad: function() {
    var that = this;
    loadMsgData(that);
  },
  // 定位数据
  scroll:function(event){
    var that = this;
    that.setData({
      scrollTop : event.detail.scrollTop
    });
 },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

Premier point : Si vous ne comprenez pas les méthodes dans app.ajax.req, vous pouvez vous référer à : Demande d'applet WeChat (avec le code source de l'interface correspondant)

Deuxième point : comme il s'agit d'une requête de pagination, le contenu de la dernière requête doit être enregistré, donc list.push est utilisé pour le fusionner.

Le troisième point : après chaque requête, le nombre de pages doit être incrémenté de un, et l'icône chargée doit être affichée avant le chargement et masquée après le chargement.

Le quatrième point : initialisation du chargement de la page pour obtenir les informations de paramétrage, document officiel : https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html # wxgetsysteminfoobject

Le cinquième point : logique déroulante, définir le numéro de page sur un, effacer le contenu de msgList, le positionner à 0px du haut, et enfin appeler la méthode de chargement des données .

Le sixième point : La logique du glissement vers le haut est appelée directement. Parce que le point d'ancrage s'est vu attribuer une valeur dans la méthode scorll.

Point 7 : Si vous appelez mon interface, l'appid ne peut pas être utilisé. Vous devez créer un nouveau projet et ne sélectionner aucun appid.

De cette façon, le chargement et l'actualisation sont terminés. Bien que je ne sois pas satisfait de l'actualisation, j'ai trouvé de nombreux exemples comme celui-ci. S'il y a un bon effet, s'il vous plaît. éclaire-moi.

Recommandations associées :

Explication détaillée de la méthode de mise en œuvre de l'actualisation déroulante et du chargement pull-up dans le mini-programme WeChat

La mise en œuvre du chargement déroulant et de l'actualisation pull-up de l'applet WeChat sera expliquée en détail

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!