コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

vue.js を使用してページング コンポーネントを作成する

高洛峰
リリース： 2017-01-16 11:55:10
オリジナル
1117 人が閲覧しました

私はしばらくの間 vue.js を勉強しており、それを使用して 2 つの小さなコンポーネントを作成して練習しました。
ここではパッケージ化に webpack を使用しているので、その使い方には慣れています。
ソースコードは記事の最後にあるgithubアドレスにあります。

最初はindex.html

<!DOCTYPE html>
<html>
<head>
 <title>Page</title>
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
   font-family: &#39;Open Sans&#39;, Arial, sans-serif;
  }
  .contianer {
   width: 50%;
   height: auto;
   margin: 20px auto;
  }
  article {
   margin-bottom: 50px;
  }
 </style>
</head>
<body>
 <div class=&#39;contianer&#39;>
  <article>
   文章内容...
  </article>
  <div id=&#39;main&#39;>
   <app></app> 
  </div>
 </div>
 <script type="text/javascript" src=&#39;bundle.js&#39;></script>
</body>
</html>
ログイン後にコピー
です

アプリコンポーネントを

に配置します
webpackを介してパッケージ化した後、エントリjsファイルはentry.jsです。 app.vue コンポーネントを導入します
entry.js

let Vue = require(&#39;vue&#39;);
 
import App from &#39;./components/app&#39;;
 
let app_vue = new Vue({
 el: &#39;#main&#39;,
 components: {
  app: App
 }
});
ログイン後にコピー

次に、このアプリ コンポーネントを見てみましょう

<style type="text/css" scoped>
  
</style>
 
<template>
 <comment :cur-page-index="curPageIndex" :each-page-size="eachPageSize" :comment-url="commentUrl"
  :comment-params="commentParams" :comment-is-sync="commentIsSync">
   
 </comment>
 <page :cur-page-index.sync="curPageIndex" :each-page-size="eachPageSize" :page-url="pageUrl"
  :page-params="pageParams" :page-is-sync="pageIsSync">
 
 </page>
</template>
 
<script type="text/javascript">
 import Comment from &#39;./comment&#39;;
 import Page from &#39;./page&#39;;
 
 export default {
  data () {
   return {
    curPageIndex: 1,
    eachPageSize: 7,
   }
  },
  components: {
   comment: Comment,
   page: Page
  },
 }
</script>
ログイン後にコピー

これには、comment.vue と page.vue という 2 つのサブコンポーネントがあります。動的にバインドされたデータです。親と子間のコンポーネント通信の場合、このようにして、現在のページをpage.vueからapp.vueに渡す必要があると思います。そのため、ここでは双方向バインディングを使用し、残りはparams、urlなどです、 isSync、つまり、データのバックグラウンド リクエストとは何ですか、そしてそれが同期的に動作するか非同期的に動作するかについてです。<もちろん、ここではバックグラウンド データをテストしていません。現時点では、静的データは js を通じて直接生成されます。

次に、comment.vue コメントコンポーネントを見てください

<style type="text/css" scoped>
 .comt-mask {
  opacity: 0.5;
 }
 .comt-title {
   
 }
 .comt-line {
  width: 100%;
  height: 2px;
  background-color: #CCC;
  margin: 10px 0;
 }
 .comt-wrap {
   
 }
 .comt-user {
  float: left;
 }
 .comt-img {
  width: 34px;
  height: 34px;
  border-radius: 17px;
 }
 .comt-context {
  margin: 0 0 0 60px;
 }
 .comt-name {
  color: #2B879E;
  margin-bottom: 10px;
  font-size: 18px;
 }
</style>
 
<template>
 <div v-if="hasComment" :class="{&#39;comt-mask&#39;: loading}">
  <h3 class=&#39;comt-title&#39;>{{ totalCommentCount }} 条评论</h3>
  <div class="comt-line"></div>
  <div class="comt-wrap" v-for="comment of commentArr">
   <div class="comt-user">
    <img src=&#39;{{ comment.avatar }}&#39; class="comt-img"/>
   </div>
   <div class="comt-context">
    <p class="comt-name">{{ comment.name }}</p>  
    <p>
     {{ comment.context }}
    </p>
   </div>
   <div class="comt-line"></div>
  </div>
 </div>
</template>
 
<script type="text/javascript">
 import {getCommentData, getTotalCommentCount} from &#39;./getData&#39;;
 
 export default {
  props: {
   curPageIndex: {
    type: Number,
    default: 1,
   },
   eachPageSize: {
    type: Number,
    default: 7,
   },
   commentUrl: {
    type: String,
    default: &#39;&#39;,
   },
   commentParams: {
    type: Object,
    default: null,
   },
   commentIsSync: {
    type: Boolean,
    default: true,
   },
  },
  data () {
   return {
    totalCommentCount: 0,
    hasComment: false,
    loading: true,  
   }
  },
  computed: {
   commentArr () {
    this.loading = true;
    let res = getCommentData(this.commentUrl, this.commentParams, this.commentIsSync, this.curPageIndex, this.eachPageSize);
    this.loading = false;
    return res;
   },
  },
  created () {
   let cnt = getTotalCommentCount(this.commentUrl, this.commentParams);
   this.totalCommentCount = cnt;
   this.hasComment = cnt > 0;
  }
 }
</script>
ログイン後にコピー

ここでの getData.js については後述しますが、ここでデータを取得します。
loading: 本来の目的は、コメントをロードするためにページ番号にジャンプするときに現在のコメントの 0.5 の透明度マスクをロードすることであり、その後、ajax はコールバック関数を通じてマスクをキャンセルします。現在、これは達成できず、強制的に書き込むことしかできません。ですが、これではダメです
hasComment: コメントコンポーネントの初回読み込み時に総データ長を要求します。データが無い場合、コメントコンポーネントのレイアウト内容は表示されません
·curPageIndex·: 渡されます。 props を使用して、親コンポーネント app を介してダウンします
これらのデータについては、デフォルト値と型を設定することをお勧めします。
page.vue

<style type="text/css" scoped>
 .page {
  text-align: center;
  margin: 30px;
 }
 .page-btn {
  color: gray;
  background-color: white;
  border: white;
  width: 30px;
  height: 30px;
  margin: 5px;
  font-size: 18px;
  outline: none;
 }
 .page-btn-link {
  cursor: Crosshair;
 }
 .page-btn-active {
  border: 1px solid gray;
  border-radius: 15px;
 }
</style>
 
<template>
 <div class="page">
  <button v-for="pageIndex of pageArr" track-by=&#39;$index&#39; :class="{&#39;page-btn&#39;: true, &#39;page-btn-active&#39;:
   this.curPageIndex === pageIndex, &#39;page-btn-link&#39;: checkNum(pageIndex)}"
   @click="clickPage(pageIndex)" >
    {{ pageIndex }}
  </button> 
 </div>
</template>
 
<script type="text/javascript">
 import {getTotalPageCount} from &#39;./getData&#39;;
 
 export default {
  props: {
   totalPageCount: {
    type: Number,
    default: 0,
   },
   curPageIndex: {
    type: Number,
    default: 1,
   },
   eachPageSize: {
    type: Number,
    default: 7,
   },
   pageAjcn: {
    type: Number,
    default: 4,
   },
   pageUrl: {
    type: String,
    default: &#39;&#39;,
   },
   pageParams: {
    type: Object,
    default: null,
   },
   pageIsSync: {
    type: Boolean,
    default: true,
   }     
  },
  data () {
   return {
 
   }
  },
  computed: {
   pageArr () {
    let st = 1,
     end = this.totalPageCount,
     cur = this.curPageIndex,
     ajcn = this.pageAjcn,
     arr = [],
     left = Math.floor(ajcn / 2),
     right = ajcn - left;
      
    if (end == 0 || cur == 0) {
     return arr;
    } else {
     console.log(st, end, cur, left, right);
     arr.push(st);
     console.log(st+1, cur-left);
     if (st + 1 < cur - left) {
      arr.push(&#39;...&#39;);
     }
     for (let i = Math.max(cur - left, st + 1); i <= cur - 1; ++i) {
      arr.push(i);
     }
     if (cur != st) {
      arr.push(cur);
     }
     for (let i = cur + 1; i <= cur + right && i <= end - 1 ; ++i) {
      arr.push(i);
     }
     if (cur + right < end - 1) {
      arr.push(&#39;...&#39;);
     }
     if (end != cur) {
      arr.push(end);
     }
     return arr;
    }
   }
  },
  methods: {
   clickPage (curIndex) {
    if (Number.isInteger(curIndex)) {
     this.curPageIndex = curIndex;
    }
   },
   checkNum (curIndex) {
    return Number.isInteger(curIndex);
   }  
  }，
  created () {
   this.totalPageCount = getTotalPageCount(this.pageUrl,  this.pageParams, this.pageIsSync,
    this.eachPageSiz);
  }
 }
</script>
ログイン後にコピー

は主にコンポーネント イベント、つまり最も一般的なクリック イベント、およびクラスとスタイルのバインディングのアプリケーションです。curPageIndex と this.pageIndex を比較して、このクラスがあるかどうかを判断し、それを計算します。 computed 属性を使用してページ番号配列を取得します。これは、現在のページに応じて変化し、作成時に合計ページ番号が計算されるためです。
最後は静的データを取得するためのjsファイルを生成中です

// let data = {
//  avatar: &#39;&#39;, 头像
//  name: &#39;&#39;, 用户名
//  context: &#39;&#39;, 评论内容
// }
let dataArr = [];
 
function randomStr (len) {
 return Math.random().toString(36).substr(len);
}
 
function initData () {
 for (var i = 0; i<45 ; ++i) {
  let _avator = "./resources/" + i%7 + ".jpg";
  let _name = randomStr(20);
  let _context = randomStr(2);
  dataArr.push({
   avatar: _avator,
   name: _name,
   context: _context
  });
 }
}
 
if (!dataArr.length) {
 initData();
}
 
export function getCommentData (url = &#39;&#39;, params = null, isSync = true, curPageIndex = 1, eachPageSize = 7) {
 /* ajax */
 let st = (curPageIndex - 1) * eachPageSize;
 let end = st + eachPageSize;
 
 return dataArr.slice(st, end);
}
 
export function getTotalCommentCount(url = &#39;&#39;, params = null, isSync = true) {
 /* ajax */
 return dataArr.length;
}
 
export function getTotalPageCount(url = &#39;&#39;, params = null, isSync = true, eachPageSize = 7) {
 /* ajax */
 return Math.floor((dataArr.length + eachPageSize -1 ) / eachPageSize);
}
ログイン後にコピー

以上です。

vue.js を使用したページング コンポーネントの作成に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。


関連ラベル：
vue.js 分页
ソース：php.cn
前の記事：Vue.js コンポーネント ツリーは無限ツリー メニューを実装します 次の記事：Vue.js コンポーネントとコンポーネント通信の詳細
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
for ループはランダムに 1 から 0 まで変化します 基本的に、ページが更新されるたびに、for ループは 1 から 0 に変化する可能性があります。なぜこのようなことが起こるのかはわかりませんが、画像を重ね合わせる方法に影響します。...
から 2024-04-06 16:48:14
0
1
393
クリックしたときにテキストが新しい要素 (区切り線など) に変わるようにするにはどうすればよいですか? ページ上の特定のテキストをクリックすると区切り文字/新しい要素に変わる方法を見つけようとしています。どう説明したらいいのかわかりませんが、画像の下にタイトルがあると想像してください...
から 2024-04-04 11:21:03
0
1
3580
PHP または .htaccess を介してリソースリクエスタを区別する方法はありますか リソースをリクエストしたページをブラウザがロードしている場合（例：<scriptsrc="https://www.example.com/requested_scr...
から 2024-04-04 08:37:32
0
1
404
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート