WeChat 애플릿에서 목록 풀업 로딩 구현 방법(코드 포함)

이 기사의 내용은 WeChat 애플릿의 목록 풀업 로딩 구현 코드에 관한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

특정 페이지에는 100행 등 여러 개의 목록이 있습니다. 이때 페이징 기능을 구현해야 합니다. 일반적으로 휴대폰의 페이징은 아래로 슬라이드할 때 위로 당겨집니다.

스크롤 뷰를 사용하여 구현된 바인딩scrolltolower 메서드: 아래쪽/오른쪽으로 스크롤할 때 트리거됩니다. 트리거되면 새 데이터를 얻기 위한 요청이 전송됩니다. 제가 작성했을 때 데이터를 매우 빨리 얻었습니다. 하하하, showLoading 팝업 창이 회전하여 사용자에게 알리기를 원했기 때문입니다. 풀업에 대해. 추가되지 않은 상태에서 showLoading이 깜박이기 때문에 경험이 좋지 않다고 느꼈습니다.

마지막으로 스크롤 뷰가 수직 스크롤을 사용하는 경우 에 고정 높이(높이: 93%)를 부여한 다음 페이지 높이(높이: 100%)를 설정해야 합니다. binscrolltolower를 실행할 수 없습니다

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

여기 논리 코드 조각이 있습니다

  //上拉加载分页
  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)

  },

위 내용은 WeChat 애플릿에서 목록 풀업 로딩 구현 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!