ホームページ > 記事 > WeChat アプレット > WeChat アプレットのサンプル コード: プルアップ読み込みのその他の実装メソッド
この記事の内容は、WeChat アプレットのサンプルコードに関するものです。プルアップ読み込みの実装方法については、必要としている友人が参考になれば幸いです。
1. コード環境
最初はスクロールビューコンポーネントを使っていましたが、実機で使ってみるとプルアップの読み込みが増えるとデータが飛んでしまい非常に不親切でした。ユーザーインタラクションを考慮して、プルアップを変更することにしました
Wepy フレームワークを使用し、複数のオンラインドキュメントを参照し、主に使用するのは onReachBottom() イベントです。
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>
説明: データが1画面を超えない場合、引き上げはonReachBottom()イベントをトリガーできないため、私が行った処理は「(現在の画面の高さ) /リスト ループの実際の高さ) + 1" を追加して、データが 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 中国語 Web サイトの他の関連記事を参照してください。