[vue-scroller] vue mobile プラグイン、プルダウンの下部を監視、プルアップを更新

ヒント: 記事を作成した後、目次を自動的に生成できます。生成方法は、右側のヘルプドキュメントを参照してください。

---

序文

結果は図のようになります。エラーはすべてのリクエストが完了して書き込まれていないかどうかの私の判断です

ポータル: github アドレス

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. インストール

npm i vue-scroller -S

2. ステップを使用する

1.mian.jsで導入

コードは次のとおりです（例）。

import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

2. ページコードの場合

コードは次のとおりです（例）。

<scroller 
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here -->
</scroller>

3. 書き換え後のコード

データ変数

loading: false, // 是否正在加载中
finished: false, // 是否已经加载完全部数据

ページ

<scroller style="background-color:#F9F9FC ;" 
:on-refresh="onRefresh" :on-infinite="onScroll" ref="scroller"
 noDataText="暂无更多数据">
  循环体内容
</scroller>

プル・トゥ・リフレッシュ方式とボトミングロード

// 下拉刷新
onRefresh() {
    
    
    this.queryParams.pageNum = 1
    setTimeout(() => {
    
    
        Toast('刷新成功');
        this.$refs.scroller.finishPullToRefresh(); // 关闭下拉转圈
    }, 1000);
},
// 触底加载
onScroll() {
    
    
    setTimeout(() => {
    
    
        console.log("触底加载了!")
        this.getIncomeList()
        this.$nextTick(() => {
    
    
            this.$refs.scroller.finishInfinite(true); // 关闭底部加载转圈
        })
    }, 1000)
},

データリクエスト

// 查询收文列表
getIncomeList() {
    
    
    if (this.loading || this.finished) return
    this.loading = true
    taskList(this.queryParams).then(res => {
    
    
        this.total = res.total
        this.loading = false
        const data = res.rows
        // 如果请求到的长度<=10
        if (data.length === 0) {
    
    
            this.finished = true
            return
        }
        this.incomeList = this.incomeList.concat(data)
        this.queryParams.pageNum++
        if (data.length < this.queryParams.pageSize) {
    
    
            this.finished = true
        }
    })
}

3. 変数と手法の分析

ビュースクローラー

名前	メソッド変数
ボトムローディングスピナーを閉じる	this.$refs.scroller.finishInfinite(true);
ドロップダウンサークルを閉じます	this.$refs.scroller.finishPullToRefresh();

要約する

作者の github ページのパラメータ

コードプレビュー