WeChat 애플릿 예제 코드: 풀업 로딩을 위한 추가 구현 방법

이 기사의 내용은 WeChat 애플릿 예제 코드에 관한 것입니다. 특정 참조 가치가 있는 풀업 로딩의 추가 구현 방법이 필요한 친구에게 도움이 되길 바랍니다.

1. 코드 환경

처음에는 스크롤뷰 컴포넌트를 사용했는데, 실제 머신에서 사용해보니 풀업이 더 많이 로딩될 때 데이터가 점프하는 현상이 발생했는데, 이는 매우 불친절했습니다. 사용자 상호작용이 있어서 풀업을 수정하기로 했습니다.

2. 코드

뷰 레이어:

<repeat for="{{recordList}}" key="index" index="index" item="item" >
   <view class="zan-panel">
      <view class="zan-cell">
         <view class="zan-cell__bd">变更内容：{{item.typeText}}</view>
         <view class="zan-cell__ft">￥<text style="padding-left:4rpx">{{item.totalFee/100}}</text></view>
      </view>
      <view class="zan-cell">
         <view class="zan-cell__bd zan-font-12 zan-c-gray-dark">变更时间：{{item.updateTime}}</view>
      </view>
   </view>
</repeat>
<block wx:if="{{recordList.length > pageSize}}">
   <block wx:if="{{updateLoadShow}}">
      <updateLoad :loading="updateLoadShow"></updateLoad>
   </block>
   <view class="doc-description zan-center" style="font-size:12px;" wx:else>
      <text>{{updateLoadTxt}}</text>
   </view>
</block>

지침:

데이터가 한 화면을 초과하지 않는 경우 끌어당겨도

onReachBottom()

이벤트가 트리거될 수 없으므로 제가 수행한 처리는 "(현재 화면 높이

/ 목록 루프의 실제 높이) + 1" - 데이터가 한 화면을 초과할 수 있도록 보장합니다.

onLoad() {
    // 获取系统消息
    wepy.getSystemInfo({
      success: (res) => {
        this.height = res.windowHeight
        this.pageSize = Math.round(res.windowHeight / 103) + 1
        this.$apply()
      }
    })
}

논리 레이어 작성:

// 上拉加载
onReachBottom() {
    // 上拉加载更多loading
    this.updateLoadShow = true
    let _length = this.recordList.length
    // 列表长度与列表总数对比
    if (_length === this.pagtotal) {
      setTimeout(() => {
        this.updateLoadShow = false
        this.$apply()
      }, 1000)
    } else {
      // 当前页码加一
      this.pageNum++
      // 更新数据
      this.getData()
    }
}
// 获取数据
getData() {
    const pageNum = this.pageNum
    api.get(recordURL + 'queryBalanceSub?start=' + pageNum + '&size=' + this.pageSize + '&sortStr=update_time&sortType=desc').then(({data}) => {
      if (pageNum === 1) {
        this.recordList = data.list
        this.pagtotal = data.totalRow
      } else {
        this.recordList = this.recordList.concat(data.list)
      }
      this.loadingShow = false
      this.updateLoadShow = false
      this.$apply()
    })
  }

관련 권장 사항:

WeChat 미니 프로그램 예: 4가지 페이지 점프 방법(코드 포함)

WeChat 미니 프로그램 예: WeChat 미니 프로그램의 팝업 창 구현 코드

위 내용은 WeChat 애플릿 예제 코드: 풀업 로딩을 위한 추가 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!