Méthode d'implémentation du chargement de l'extraction de liste dans l'applet WeChat (avec code)

Le contenu de cet article concerne le code d'implémentation du chargement de la liste dans l'applet WeChat. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Une certaine page comporte plusieurs listes, par exemple 100 lignes. À ce stade, la fonction de pagination doit être implémentée. La pagination sur le téléphone mobile est généralement tirée vers le haut pour être actualisée lorsqu'elle glisse vers le bas.

Utilisez scroll-view pour implémenter sa méthode bindscrolltolower : se déclenche lors du défilement vers le bas/droite. Lorsqu'elle est déclenchée, une demande est envoyée pour obtenir de nouvelles données. Lorsque j'ai écrit, les données ont été obtenues très rapidement, hahaha, car je voulais que la fenêtre contextuelle showLoading tourne pour en informer l'utilisateur. à propos du pull-up. Actualiser les données. Parce que showLoading défilait lorsqu'il n'était pas ajouté, j'avais l'impression que l'expérience n'était pas bonne.

Enfin, lorsque scroll-view utilise le défilement vertical, vous devez donner à une hauteur fixe (hauteur : 93 %), puis définir la hauteur (hauteur : 100 %) pour la page, sinon bindscrolltolower Impossible de déclencher

<scroll-view wx:if="{{isShowList}}" class=&#39;scrollHeight&#39; scroll-y="true" bindscrolltolower="getMore" lower-threshold=&#39;3&#39;>
</scroll-view>

Allez un morceau de code logique

  //上拉加载分页
  getMore(e){
    var that = this;
    var user = wx.getStorageSync('bizUser');
    wx.showLoading({
      title: '正在加载中',
    });
    setTimeout(function(){
      var pageindex = that.data.curPage;
      var student = that.data.student;
      if (pageindex>=1){
        ++pageindex;
      }
      wx.request({
        url: app.url + '',
        data: {
          schoolId: user.schoolId,
          pageSize: 10,
          curPage:pageindex
        },
        method: 'GET',
        success:function(res){
          if (res.data.data) {
            var studentLength = (res.data.data instanceof Array) ? res.data.data.length : 0;
            for (var i = 0; i < studentLength; i++) {
              //判断计时付或一次性
              if (res.data.data[i].sign_type == 2) {
                res.data.data[i].sign_type = &#39;一次性&#39;;
              } else if (res.data.data[i].sign_type == 1) {
                res.data.data[i].sign_type = &#39;计时付&#39;;
              } else if (res.data.data[i].sign_type == 3) {
                res.data.data[i].sign_type = &#39;计时付&#39;;
              } else if (res.data.data[i].sign_type == 4) {
                res.data.data[i].sign_type = &#39;一次性&#39;;
              } else if (res.data.data[i].sign_type = 5) {
                res.data.data[i].sign_type = &#39;一次性&#39;
              }

              //数字变中文
              if (res.data.data[i].learn_stage == 1) {
                res.data.data[i].learn_stage = &#39;一&#39;;
              } else if (res.data.data[i].learn_stage == 2) {
                res.data.data[i].learn_stage = &#39;二&#39;;
              } else if (res.data.data[i].learn_stage == 3) {
                res.data.data[i].learn_stage = &#39;三&#39;
              }
            }

            if (studentLength ==10) {
              for (var j = 0; j < studentLength;j++){
                student.push(res.data.data[j]);
              }
              that.setData({
                student: student,
                load: &#39;上拉加载更多..&#39;,
                curPage: pageindex
              })


            } else if (studentLength<10){
              for (var j = 0; j < studentLength; j++) {
                student.push(res.data.data[j]);
              }
              that.setData({
                student: student,
                load: &#39;已经没有更多了..&#39;,
                curPage: pageindex
              })
            }
          } else {
            that.setData({
              load: &#39;已经没有更多了&#39;
            })
          }
        }
      })

      wx.hideLoading();

    },500)

  },

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!