vue的一個分頁組件的示例代碼

分頁組件在項目中經(jīng)常要用到之前一直都是在網(wǎng)上找些jq的控件來用(逃..),最近幾個項目用上vue了項目又剛好需要一個分頁的功能。具體如下：

站在用戶的角度思考問題，與客戶深入溝通，找到紅花崗網(wǎng)站設計與紅花崗網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站制作、網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務覆蓋紅花崗地區(qū)。

文件page.vue為一個pc端的分頁組件,基礎的分頁功能都有，基本的思路是，頁面是用數(shù)據(jù)來展示的，那就直接操作相關(guān)數(shù)據(jù)來改變視圖

Getting started

import Page from './page.vue' 從目錄引入該文件,在父組件注冊使用

total：總頁碼
currentIndex：當前頁碼
listLen：頁面ui要顯示幾個列表頁
getPage： page組件把每個事件的頁碼發(fā)送給父組件，用來向后臺發(fā)送相關(guān)請求來展示內(nèi)容

about page.vue

html 部分

    
首頁
    
<<
  上一列表頁
    
<
   點解當前列表頁上一頁
    
{{item}}
    
>
  點解當前列表頁下一頁
    
>>
  下一列表頁
    
尾頁
  

相關(guān)數(shù)據(jù)說明

data() {
  return {
   num: Number, //表示當前頁碼高亮
   arr: [], //頁面顯示的數(shù)組
   page: Number, //一頁顯示多少個,可以自定義,不能大于總頁碼
   Remainder:Number, //是否整除
   merchant:Number, // 比較總頁數(shù)和page頁
  };
 },
 props: {
  //分頁的總數(shù)
  total: {
   type: Number,
   default: 5
  },
  //當前頁
  currentIndex: {
   type: Number,
   default: 1
  },
  //一個列表頁顯示多少頁碼
  listLen:{
   type: Number,
   default: 5
  }
 },

methods 里面的相關(guān)事件，思路主要是判斷當前列表頁的第一項和最后一項.通過循環(huán)來該變arr成員的值

bash

# install dependencies
npm install

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

# build for production with minification
npm run build

之前用ember.js寫過一個類似組件，現(xiàn)在基于vue2.0封裝一個，方便以后用于不同項目，可以拿來直接使用.

小總結(jié)：之前也接觸過ng4,發(fā)現(xiàn)這些相似框架排除過渡動畫，頁面展示都是通過后臺發(fā)過來或者前端模擬的數(shù)據(jù)來 渲染頁面，當然這只是相通的一小部分，也是這類框架基本思想。

代碼地址：https://github.com/hgchenhao/component

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。