WeChat applet example code: more implementation methods for pull-up loading-Mini Program Development-php.cn

WeChat applet example code: more implementation methods for pull-up loading

不言

Release： 2018-08-21 16:43:00

Original

2934 people have browsed it

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

1. Code environment

I used the scroll-view component at the beginning, but when I used it on a real machine, I found that when more pull-ups were loaded, the data jumped, which affected user interaction and its Not friendly, so I decided to modify the pull-up to load more effects

I use the wepy framework, refer to multiple online documents, and also refer to the official documents. The main use is the onReachBottom() event

2. Code

View layer:

<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>

Copy after login

Description: If the data does not exceed one screen, pulling it up cannot trigger onReachBottom( ) event, so the processing I did was "(current screen height / actual height of a list loop) 1" to ensure that the data can exceed one screen.

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

Copy after login

Logical layer writing:

// 上拉加载
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()
    })
  }

Copy after login

Related recommendations:

WeChat applet example: four page jump methods (with code)

WeChat Mini Program Example: Implementation Code of Pop-up Window in WeChat Mini Program

The above is the detailed content of WeChat applet example code: more implementation methods for pull-up loading. For more information, please follow other related articles on the PHP Chinese website!