Exemple de code d'applet WeChat : plus de méthodes d'implémentation pour le chargement pull-up

Le contenu de cet article concerne l'exemple de code de l'applet WeChat : davantage de méthodes d'implémentation de chargement pull-up, qui ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

1. Environnement de code

J'ai utilisé le composant scroll-view au début, mais lorsque je l'ai utilisé sur une vraie machine, j'ai découvert que lorsque davantage de pull-ups étaient chargés, les données sauté, ce qui a affecté l'interaction de l'utilisateur et ce n'est pas convivial, j'ai donc décidé de modifier le pull-up pour charger plus d'effets

J'utilise le framework wepy, je fais référence à plusieurs documents en ligne, et je me réfère également aux documents officiels . L'utilisation principale est l'événement onReachBottom()

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>

Explication : Si les données ne dépassent pas un écran, l'extraction vers le haut ne déclenchera pas l'événement onReachBottom(), donc le traitement que j'ai effectué était "(hauteur actuelle de l'écran / hauteur réelle d'une boucle de liste ) + 1" pour garantir que les données peuvent dépasser un écran.

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

Écriture de couche logique :

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

Recommandations associées :

Exemple d'applet WeChat : quatre méthodes de saut de page (avec code)

Exemple de programme WeChat Mini : code d'implémentation de la fenêtre contextuelle dans le programme WeChat Mini

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!