Une brève discussion sur la façon d'implémenter les fonctions d'actualisation déroulante et de chargement pull-up dans les mini-programmes ? (avec code)

Cet article vous présentera comment implémenter les fonctions d'actualisation déroulante et de chargement pull-up dans le mini-programme. J'espère qu'il vous sera utile !

Lors de l'affichage des données de liste, s'il y a beaucoup de données ou si elles sont mises à jour rapidement, vous devez fournir des fonctions d'actualisation et de chargement déroulant pour améliorer l'expérience utilisateur. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Actualisation déroulante et chargement par extraction de l'écriture du fichier wxml

Lorsque nous utilisons le composant coulissant de vue défilante pour afficher la liste, il y a un menu déroulant rafraîchissement et chargement pull-up en lui-même Fonction de déclenchement

<scroll-view class="scroll" scroll-y="{{true}}" upper-threshold="50"   
bindscrolltoupper="refresh"  style="height:700px">
  <l-loadmore show="{{upfresh}}" bindscrolltolower="getMore"  type="loading" loading-text="拼命刷新中">
</l-loadmore>

<l-loadmore show="{{downfresh}}" type="loading" loading-text="拼命加载中">
</l-loadmore>

• scroll-y : s'il faut autoriser le défilement vertical, la valeur par défaut est false, ici nous la définissons sur true
• seuil supérieur : à quelle distance du haut/gauche doit être déclencher l'événement scrolltoupper (dérouler vers le bas pour actualiser)
• bindscrolltoupper : scroll Déclenché lors du défilement vers le haut/gauche, définissez ici la fonction qui doit être déclenchée lors du défilement vers le haut
• bindscrolltolower : déclenché lors du défilement vers le haut/droite

Présentation du framework line-ui

Ici, j'utilise le menu déroulant, l'actualisation et le pull-up. Le composant d'affichage de chargement est fourni par le framework lin-ui. Ici, je vais parler de la façon d'introduire le framework lin. -ui framework :

adresse officielle du document lin-ui

//在小程序项目目录中执行下面的函数
npm install lin-ui

Puis introduisez-le dans le fichier json de la page où le composant doit être introduit

"usingComponents": {
    "l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index",
    "l-loading":"/miniprogram_npm/lin-ui/loading/index",
  },

De cette façon, le composant lin-ui a été introduit avec succès

Écriture de code js

data: {
    downfresh:false,//底部加载展示控制
    upfresh:false//顶部加载展示控制
  },

Tout d'abord, définissez si le composant de chargement est affiché dans les données. Par défaut, il ne sera pas affiché

Tirez vers le bas pour actualiser le code js

//下拉刷新
refresh(){
    if(this.data.upfresh){
      console.log("还没刷新完成")
      return;
    }
    var that = this;
    this.setData({
      upfresh: true,
      // upfresh:false
    })
   
    setTimeout(function() {
      //updateData为自己的数据更新逻辑代码
      that.updateData(true,()=>{
        that.setData({
          upfresh: false,
      });
     })
      // wx.hideLoading();
    console.info('下拉刷新加载完成.');
  }, 500);
  },
    
      //更新数据
   updateData:function(tail, callback) {
  
    var that = this;
    console.log("updatedata-=-=seea"+that.data.searchValue)
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: 0,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        this.setData({
          componys: res.data
        })
        if (callback) {
          callback();
        }
      }
    })
   },

Tirez vers le haut. Chargement du code js

 /**
   * 滑动到底部加载更多
   */
  getMore(){
    // downloadingData=this.data.downloadingData
    if(this.data.downfresh){
      console.log("还没加载完成")
      return;
    }
   var that = this;
    this.setData({
      downfresh: true,
      // upfresh:false
    })
   
    this.setData({
      downloadingData: true
      // upfresh:false
    })

    setTimeout(function() {
      that.loadData(true,()=>{
        that.setData({
        downfresh: false
      });
     })
      // wx.hideLoading();
    console.info('上拉数据加载完成.');
  }, 1000);
  },
    
      loadData: function(tail, callback) {
    var that = this;
    wx.request({
      url: app.gBaseUrl + 'compony-detail/page',
      method: 'GET',
      data: {
        page: that.data.componys.length,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        // console.log(JSON.stringify(res.data))
        that.setData({
          componys: that.data.componys.concat(res.data),
        });
        if (callback) {
          callback();
        }
      }
    })
  },

Nous avons déjà implémenté l'intégralité des fonctions d'actualisation pull-down et de chargement pull-up. Nous utilisons principalement les caractéristiques des composants de scroll-view pour contrôler l'affichage et la masquage du composant d'enregistrement en fonction du temps de déclenchement. La mise en œuvre globale n'est pas très difficile, le code spécifique peut être ajusté de manière appropriée en fonction de votre situation réelle.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation ! !

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!