> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 애플릿 예제 코드: 풀업 로딩을 위한 추가 구현 방법

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

不言
풀어 주다: 2018-08-21 16:43:00
원래의
2964명이 탐색했습니다.

이 기사의 내용은 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 + &#39;queryBalanceSub?start=&#39; + pageNum + &#39;&size=&#39; + this.pageSize + &#39;&sortStr=update_time&sortType=desc&#39;).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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿