vue でページング コンポーネントを実装する方法

この記事では主に Vue のページング コンポーネントのサンプル コードを紹介しますので、参考にしてください。

ページング コンポーネントはプロジェクトでよく使用されます。以前は、いつもインターネット上でいくつかの jq コントロールを見つけて使用していました (エスケープ...)。最近、いくつかのプロジェクトで Vue が使用されており、プロジェクトにはページング機能が必要です。詳細は次のとおりです:

ファイル page.vue は、基本的なページング機能を備えています。基本的な考え方は、ページをデータを使用して表示するため、関連するデータを直接操作してビューを変更します。

はじめに

import Page from './page.vue' ディレクトリからファイルをインポートし、親コンポーネントに登録します

<page :total=&#39;total&#39; :current-index="currentIndex" :listLen=&#39;listLen&#39; @getPage=&#39;getPage&#39;></page>

total: 総ページ番号

currentIndex: 現在のページ番号
listLen: ページ数ページ UI が表示するページのリスト
getPage: ページ コンポーネントは、各イベントのページ番号を親コンポーネントに送信します。これは、コンテンツを表示するために関連するリクエストをバックグラウンドに送信するために使用されます

page.vue について

htmlパート

<ul class="item" v-show="arr.length">
    <li @click="start">首页</li>
    <li @click="pre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><<</a></li>  上一列表页
    <li @click="currentPre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><</a></li>   点解当前列表页上一页
    <li v-for="(item,index) in arr" :class="{active: item===num}" @click="getPage(item)">{{item}}</li>
    <li @click="currentNext"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >></a></li>  点解当前列表页下一页
    <li @click="next"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >>></a></li>  下一列表页
    <li @click="end">尾页</li>
  </ul>

関連データの説明

data() {
  return {
   num: Number, //表示当前页码高亮
   arr: [], //页面显示的数组
   page: Number, //一页显示多少个,可以自定义,不能大于总页码
   Remainder:Number, //是否整除
   merchant:Number, // 比较总页数和page页
  };
 },
 props: {
  //分页的总数
  total: {
   type: Number,
   default: 5
  },
  //当前页
  currentIndex: {
   type: Number,
   default: 1
  },
  //一个列表页显示多少页码
  listLen:{
   type: Number,
   default: 5
  }
 },

メソッド イベント、主なアイデアは、ループを使用して、arr メンバーの値を変更することです

bash

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

I。以前に ember.js で同様のコンポーネントを作成しましたが、現在は vue2.0 One に基づいてパッケージ化されており、将来的にはさまざまなプロジェクトに使用でき、直接使用することもできます。以前に、これらの同様のフレームワークには遷移アニメーションが含まれておらず、ページ表示はバックグラウンドから送信されたデータまたはフロントエンドによってシミュレートされたデータによってレンダリングされていることがわかりました。もちろん、これは接続のほんの一部であり、基本的な考え方でもあります。このタイプのフレームワークの。

上記は私があなたのためにまとめたものです。

関連記事:

vue.jsの2.x仮想スクロールバーについて

AngularJSを使ってExcelファイルをダウンロードする機能を実装する方法

vueでconfigを構成する方法(詳細チュートリアル)

JS でマルチオブジェクトの動きを実装する方法 (詳細なチュートリアル)

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