VUE でページングコンポーネントを実装する手順の詳細な説明-jsチュートリアル-php.cn

VUE でページングコンポーネントを実装する手順の詳細な説明

php中世界最好的语言

リリース： 2018-04-17 11:21:04

オリジナル

1376 人が閲覧しました

今回は、VUE でページングコンポーネントを実装する方法について、段階的に詳しく説明します。VUE でページングコンポーネントを実装する方法についての注意点について、実際のケースを見てみましょう。見て。

ページングは、特にさまざまなフロントエンドとバックエンドが分離されている今日では、Web 開発において非常に一般的な機能であり、フロントエンドはデータのカウントに基づいてページングのページ番号を計算します。データと現在のページ番号 pageIndex を取得し、それをページ上にレンダリングする非常に一般的な関数です。初期の jquery の時代から現在のさまざまなフロントエンドフレームワークの時代に至るまで、ページネーション機能は不可欠です。

ほとんどの場合 (基本的に) ページングは非同期データリストの処理です。ここではまずページングプロセスを理解する必要があります。

各ページに表示されるデータ量 pageSize と現在のページ番号 pageIndex がわかっている場合:

API をリクエストし、最初の画面データ (pageSize 内) と関連するすべての条件の合計データ数を返します
合計データをページコンポーネントに渡してページ番号を計算し、ページ上にレンダリングします
ページ番号をクリックして、ページ番号のデータを取得するリクエストを送信し、データ数とページ番号の下のデータエントリの合計量を返します。

データを取得するための条件が変更されたため (検索であり、キーワードが変更されたと仮定します)、カウントは不確実です。または、変更されたときに各ページに表示されるデータの量を制御するための選択ドロップダウンボックスがあります。、総ページ数は確実ですが、変更する必要もあります。したがって、多くの場合、ページ番号を再計算してレンダリングする必要があります。

プロセスを理解すると、Vue でページングコンポーネントを実装するのが簡単になります。

単純な処理では、スタイルはブートストラップのページングコンポーネントに似ています。最初のページでは、前のページとホームページのボタンが無効になり、最後のページでは、次のページと範囲外のページ番号が無効になります。 ... に置き換えると、レンダリングは次のようになります:

プロセスを理解すると、Vue でページングコンポーネントを実装するのが簡単になります。

ページネーションコンポーネント
テンプレート

<template>
  <ul class="mo-paging">
    <!-- prev -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--prev&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="prev">prev</li>
    <!-- first -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--first&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="first">first</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showPrevMore">...</li>
    <li :class="[&#39;paging-item&#39;, {&#39;paging-item--current&#39; : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showNextMore">...</li>
    <!-- last -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--last&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="last">last</li>
    <!-- next -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--next&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="next">next</li>
  </ul>
</template>

ログイン後にコピー

スタイル(scss)

りぃ

javascript

りぃ

この記事の事例を読んだ後は、親コンポーネントで

.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 1rem 0;
  font-size: 0;
  list-style: none;
  user-select: none;
  > .paging-item {
    display: inline;
    font-size: 14px;
    position: relative;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: -1px;
    cursor: pointer;
    color: #0275d8;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      background-color: #f0f0f0;
      color: #0275d8;
    }
    &.paging-item--disabled,
    &.paging-item--more{
      background-color: #fff;
      color: #505050;
    }
    //禁用
    &.paging-item--disabled {
      cursor: not-allowed;
      opacity: .75;
    }
    &.paging-item--more,
    &.paging-item--current {
      cursor: default;
    }
    //选中
    &.paging-item--current {
      background-color: #0275d8;
      color:#fff;
      position: relative;
      z-index: 1;
      border-color: #0275d8;
    }
  }
}

ログイン後にコピー

を使用します。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue-Routerのスクロール動作の詳細な説明

vueでのParticles.jsライブラリの使用方法

BootStrap操作データテーブル

以上がVUE でページングコンポーネントを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。