Vue を使用してプルダウン更新とプルアップ読み込みを実装するにはどうすればよいですか?

モバイル インターネットの人気に伴い、プルダウンによる更新とプルアップによる読み込みは、最新のアプリや Web サイトの標準機能の 1 つになりました。これら 2 つの対話方法により、ユーザー エクスペリエンスとページのパフォーマンスが大幅に向上します。 Vue フレームワークでは、いくつかのプラグインを使用するか、自分でコードを作成して、これら 2 つの対話方法を実現できます。

プルダウン更新の実装

プルダウン更新とは、ユーザーがページをプルダウンしてデータ更新をトリガーする操作を指します。 Vue では、すべての Vue オプションと API を通じてプルダウン更新を実装できます。最も速くて信頼性の高い方法は、vue-pull-to を使用することです。

vue-pull-to は、Vue でプルダウン更新操作を実装するコンポーネントです。これにより、アプリケーションにプルダウン更新を非常に簡単に追加できます。 Vue.js Summit インストラクターの Matt Maribojoc によって開発されたこのコンポーネントを使用すると、vue-pull-to を通常の Vue コンポーネントを使用するのと同じくらい簡単かつクリーンに使用できるようになります。

まず、プロジェクトに vue-pull-to をインストールします。

npm install vue-pull-to --save

次に、プルダウン更新が必要なコンポーネントに vue-pull-to を導入し、コンポーネントの 1 つとして登録します。現在の Vue コンポーネント。

<template>
  <div>
    <pull-to @refresh="refresh" :disabled="disabled" :high-action="true">
      <div v-for="(item, index) in list" :key="index" class="item">{{ item }}</div>
    </pull-to>
  </div>
</template>

<script>
  import PullTo from 'vue-pull-to'

  export default {
    components: {
      PullTo
    },
    data() {
      return {
        list: [], // 下拉刷新的数据
        disabled: false, // 是否禁用下拉刷新
      }
    },
    methods: {
      // 下拉刷新回调事件
      refresh() {
        // 发送请求，获取最新数据
        axios.get('/getList').then(res => {
          this.list = res.data
        })
      }
    }
  }
</script>

上記のコードでは、まず vue-pull-to を導入し、コンポーネントとして登録します。次に、テンプレート内の pull-to タグを使用してその更新イベント (このイベントはユーザーがページをプルダウンするとトリガーされます) をリッスンし、更新コールバック関数でサーバーにリクエストを送信して最新のデータとデータを取得します。データをリストに割り当てます。これにより、プルダウンの更新が完了すると、リスト データが更新され、ページが再レンダリングされます。

プルアップ ロードの実装

プルアップ ロードは通常、ページが下にスクロールするときに発生します。ユーザーが一番下までスクロールすると、ページは自動的にデータ ロード操作をトリガーします。 Vue では、vue-infinite-loading プラグインを使用してプルアップ ロード機能を実装できます。

vue-infinite-loading は、長いリスト用の Vue ベースの読み込みプラグインで、リストをスクロールするときにコンテンツやデータを動的に追加できます。スクロール イベントをリッスンする 2 つの方法が提供されます。1 つ目は命令型の使用で、2 つ目はコンポーネントベースの使用で、読み込み中およびデータがなくなったときの状態管理をサポートします。

まず、プロジェクトに vue-infinite-loading をインストールします。

npm install vue-infinite-loading --save

次に、プルアップ ロードで追加する必要があるコンポーネントに vue-infinite-loading コンポーネントを導入し、登録しますそれを現在の Vue のコンポーネントとして扱います。

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="item">
      {{ item }}
    </div>
    <infinite-loading :on-infinite="onInfinite" spinner="bubbles" :distance="120">
      <div slot="no-results">没有更多了</div>
    </infinite-loading>
  </div>
</template>

<script>
  import InfiniteLoading from 'vue-infinite-loading'

  export default {
    components: {
      InfiniteLoading
    },
    data() {
      return {
        list: [], // 上拉加载的数据
        page: 1, // 当前页码
        size: 10, // 每页数量
        isLoading: false, // 是否正在加载中
      }
    },
    methods: {
      // 上拉加载回调事件
      onInfinite() {
        if (this.isLoading) return
        this.isLoading = true
        axios.get('/getList', {page: this.page, size: this.size}).then(res => {
          this.list = this.list.concat(res.data)
          this.page++
          this.isLoading = false
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
        })
      }
    }
  }
</script>

上記のコードでは、まず vue-infinite-loading を導入し、コンポーネントとして登録します。次に、テンプレートで無限ロード タグを使用し、その on-infinite イベント (このイベントはユーザーが一番下までスクロールするとトリガーされます) をリッスンし、onInfinite コールバック関数でサーバーにリクエストを送信して次のデータを取得します。ページ データを取得してリスト配列に追加し、$InfiniteLoading:loaded イベントをトリガーします。これにより、ページが読み込まれると、読み込みステータスがクリアされ、ページが更新されてレンダリングされます。また、 distance 属性を使用して読み込みをトリガーする距離を制御したり、スピナー属性を使用して読み込みアニメーションを設定したり、結果なしスロットを使用して読み込み完了後のプロンプト情報を設定したりすることもできます。

概要

モバイル インターネット時代では、プルダウン更新とプルアップ読み込みが最新のアプリや Web サイトの標準機能になりました。ユーザー エクスペリエンスを向上させるために、Vue はいくつかのプラグインを提供していますこれら 2 つのインタラクション モードを実装するための -ins と API により、開発者は対応する機能を迅速に追加し、ユーザー エクスペリエンスをより快適にすることができます。 Vue のプルダウン更新メソッドとプルアップ読み込みメソッドの簡単な紹介とコードのデモを行いましたので、実際の開発に役立つことを願っています。

以上がVue を使用してプルダウン更新とプルアップ読み込みを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。