基于vue2.0如何實現(xiàn)仿百度前端分頁效果

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

10多年的晉中網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整晉中建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“晉中網(wǎng)站設計”,“晉中網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

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

代碼實現(xiàn)

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

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

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

事件

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

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

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

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

a.字符串數(shù)組形式props

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

或者指定每個prop的值類型

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

b.props驗證

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

使用props傳遞數(shù)據(jù)給子組件 ，子組件主要有三種形式來接收到父組件傳遞過來的參數(shù)
props字符串數(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，因為當父組件重新呈現(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;
  }

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

網(wǎng)站欄目：基于vue2.0如何實現(xiàn)仿百度前端分頁效果
URL網(wǎng)址：http://m.jiaotiyi.com/article/jsjhoe.html