這篇文章主要介紹了基于vue2.0如何實現(xiàn)仿百度前端分頁效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

站在用戶的角度思考問題，與客戶深入溝通，找到延津網(wǎng)站設(shè)計與延津網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(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è)務(wù)覆蓋延津地區(qū)。

先看實現(xiàn)效果圖

代碼實現(xiàn)

按照慣例，我們在凍手實現(xiàn)的時候還是先想一想vue實現(xiàn)組件的思路

1、需要提前設(shè)定哪些參數(shù)需要暴露出來給父組件傳遞

方法及參數(shù)說明
屬性
page-size 每頁顯示條目個數(shù)
total 總條目數(shù)
current-page 當(dāng)前頁數(shù)
layout 布局 默認(rèn)不顯示 jumper,total

事件

change 當(dāng)前頁改變時觸發(fā)

2、再一個就是涉及到的父子組件通信

這里主要通過props向子組件傳遞參數(shù)

 在子組件中使用emit自定義事件返回數(shù)據(jù)給父組件

a.字符串?dāng)?shù)組形式props

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

或者指定每個prop的值類型

props: {
 title: String,
 likes: Number,
 isPublished: Boolean,
 commentIds: Array,
 author: Object
}

b.props驗證

props: {
  // 基礎(chǔ)的類型檢查 (`null` 匹配任何類型)
  propA: Number,
  // 多個可能的類型
  propB: [String, Number],
  // 必填的字符串
  propC: {
   type: String,
   required: true
  },
  // 帶有默認(rèn)值的數(shù)字
  propD: {
   type: Number,
   default: 100
  },
  // 帶有默認(rèn)值的對象
  propE: {
   type: Object,
   // 對象或數(shù)組默認(rèn)值必須從一個工廠函數(shù)獲取
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定義驗證函數(shù)
  propF: {
   validator: function (value) {
    // 這個值必須匹配下列字符串中的一個
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
   }
  }
 }

使用props傳遞數(shù)據(jù)給子組件 ，子組件主要有三種形式來接收到父組件傳遞過來的參數(shù)
props字符串?dāng)?shù)組、指定每個prop值類型以及props驗證，通常我們會使用props驗證

分析完之后，接下來我們可以凍手實現(xiàn)了

1、這里我們用vue-cli先創(chuàng)建一個vue項目

安裝vue-cli

$npm install -g vue-cli

創(chuàng)建vue項目

$vue init webpack my-project

項目運行

$cd my-project
$npm run dev

2、在components文件下創(chuàng)建一個Paging組件

*{
    padding: 0;
    margin: 0;
}
.fl{
  float: left;
}
.clearfix:after{
  display: block;
  content: '';
  clear: both;
}
.page-size{
    height: 26px;
  line-height: 26px;
}
.page-list{

}
.page-jump{
    height: 26px;
  line-height: 26px;
  margin-left: 20px;
}
.page-jump .input{
  width: 32px;
    padding: 4px 2px;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  margin: 0 4px;
}
  ul{
    list-style: none;
  }
  ul li{
    float: left;
    color: #606266;
    background: #f4f4f5;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 2px;
    margin: 0 5px;
  }
  ul>li.active{
    background: #409eff;
    color:#fff;
  }

3、在父組件中引入并使用組件

遇到的問題

1、在子組件中修改currentPage時報錯

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

在使用組件時，傳入的prop，被組件內(nèi)部又做了一次修改

 避免直接修改prop，因為當(dāng)父組件重新呈現(xiàn)時，值將被覆蓋

changePage:function(idx){
    if(idx!=this.currentPage && idx>0 && idx<=this.totalPage){
      this.currentPage = idx;
      // 觸發(fā)父組件事件 pageChange會轉(zhuǎn)換成小寫pagechange
      this.$emit('change');
      }
  }

解決

 修改代碼，通過emit傳遞curPage給父組件，讓父組件修改

changePage:function(idx){
    if(idx!=this.currentPage && idx>0 && idx<=this.totalPage){
      // 觸發(fā)父組件事件 pageChange會轉(zhuǎn)換成小寫pagechange
      this.$emit('change',{curPage:idx});
      }
  }

父組件監(jiān)聽事件更新curPage

onPageChange:function(page){
   this.curPage = page.curPage;
  }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“基于vue2.0如何實現(xiàn)仿百度前端分頁效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

分享名稱：基于vue2.0如何實現(xiàn)仿百度前端分頁效果-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/dpjhdj.html