Implementation method of list pull-up loading in WeChat applet (with code)-Mini Program Development-php.cn

Implementation method of list pull-up loading in WeChat applet (with code)

不言

Release： 2018-10-29 16:56:17

forward

5513 people have browsed it

The content of this article is about the implementation code of list pull-up loading in the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

A certain page has multiple lists, such as 100 rows. At this time, the paging function needs to be implemented. The paging on the mobile phone is generally pulled up to refresh when sliding to the bottom.

Use scroll-view to implement, its bindscrolltolower method: trigger when scrolling to the bottom/right. When triggered, a request is sent to obtain new data. When I wrote, the data was obtained very quickly. I also added a timer to it, hahaha, because I wanted the showLoading pop-up window to rotate around to let the user know about the pull-up. Refresh data. Because showLoading flashed by when it was not added, I felt that the experience was not good.

Finally, when scroll-view uses vertical scrolling, you need to give a fixed height (height: 93%), and then set the height (height: 100%) for the page, otherwise bindscrolltolower Can't trigger

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

Copy after login

Come on a piece of logical code

  //上拉加载分页
  getMore(e){
    var that = this;
    var user = wx.getStorageSync(&#39;bizUser&#39;);
    wx.showLoading({
      title: &#39;正在加载中&#39;,
    });
    setTimeout(function(){
      var pageindex = that.data.curPage;
      var student = that.data.student;
      if (pageindex>=1){
        ++pageindex;
      }
      wx.request({
        url: app.url + &#39;&#39;,
        data: {
          schoolId: user.schoolId,
          pageSize: 10,
          curPage:pageindex
        },
        method: &#39;GET&#39;,
        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)

  },

Copy after login

The above is the detailed content of Implementation method of list pull-up loading in WeChat applet (with code). For more information, please follow other related articles on the PHP Chinese website!