찾다
위챗 애플릿미니 프로그램 개발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(&#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)

  },

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

성명
이 기사는 CSDN에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.