分頁器(Vue.js)
載入超時，點擊重試
寫了一個簡單的分頁器，就我博客上用的那個，Vue.js實現的PC端使用的，如上圖。
自己憑空想的，也不知道合不合理，有機會看看別人怎麼實現的。我的思路是：
首先分頁肯定要寫成一個組件，而且分頁組件要放在一個個的列表頁面組件中。這樣的話頁面組件就是父組件，分頁器是子組件，會涉及父組件與子組件的數據通訊。
一：兩者分工
父組件初始化分頁器，這需要父組件給分頁器傳遞控制顯隱的參數、總數據量以及每頁展示的條數。子組件中根據這些參數渲染出基本的樣式。
分頁器在被點擊後，比如點擊了某一頁或者點擊了上一頁，需要傳遞當前頁給父組件。父組件根據接收到的當前頁碼，請求數據刷新列表。分頁器的高亮切換、上一頁及下一個樣式切換都在分頁器內部實現。
二：分頁器組件代碼
<template>
<div class="Pagination" v-show="Pagination">
<div :class="PageActive==0 ? PageNext PageNextEnable : PageNext" @click="SelectPage(PageActive-1)">上一頁</div>
<div :class="PageActive== index ? PageNum PageActive : PageNum" v-for="(item,index) in PageNum" @click="SelectPage(index)">{{ index+1 }}</div>
<div :class="PageActive+1 == PageNum ? PageNext PageNextEnable : PageNext" @click="SelectPage(PageActive+1)">下一頁</div>
<div class="PageTotalNum">共{{PageTotalNum}}條</div>
</div>
</template>
<script>
export default {
name: "Pagination",
data:function () {
return{
// 當前選中頁數
PageActive:0
}
},
methods: {
// 選擇分頁
SelectPage:function (SelectPage) {
var That = this;
if(SelectPage > -1 && SelectPage < this.PageNum){
That.PageActive = SelectPage;
That.$emit(PaginationToParent,SelectPage);
}
}
},
props:[Pagination,PageTotalNum,PageNum]
}
</script>
三：列表頁使用分頁器
html代碼里引入分頁器
<Pagination v-bind:Pagination=this.Pagination
v-bind:PageTotalNum=this.PageTotalNum
v-bind:PageNum=this.PageNum
v-on:PaginationToParent="ValueByPagition"
></Pagination>
假如列表頁每頁展示16條數據，那初始化頁面時第一次先請求17條數據。判斷得到的數據數量，如果小於等於16條就不渲染分頁器了，如果大於16條就渲染分頁器。下面是初始化分頁器：
// 顯示分頁器
That.Pagination = true;
//需獲取數據總條數
That.PageTotalNum = data;
//顯示頁碼按鈕使用
That.PageNum = Math.ceil(data / 16);
接收分頁器傳遞過來的當前頁碼，並請求數據，渲染列表
methods:{
ValueByPagition : function (SelectPage) {
var That = this;
this.SQFrontAjax({
Url: /api/FriendUrlRead/foreend,
UploadData: {
params: {
PagnationData: {
Skip:SelectPage * 16,
Limit:16
}
}
},
Success: function (data) {
//渲染列表
That.FriendsUrlList = data;
}
});
}
四：Vue中父子組件傳值語法
1.父組件向子組件傳值
父組件在摸板中，像使用自定義標籤調用子組件時，將變數放在子組件上，這樣自動就傳給子組件內部了。
<Pagination v-bind:Pagination=this.Pagination
v-bind:PageTotalNum=this.PageTotalNum
v-bind:PageNum=this.PageNum>
</Pagination>
子組件內部需要聲明props參數，並且這些參數就不用聲明直接在模板中使用了。
export default {
props:[Pagination,PageTotalNum,PageNum]
}
2.子組件給父組件傳值
子組件發送：
That.$emit(PaginationToParent,SelectPage);
父組件接收：
首先摸板中調用子組件時，綁定v-on方法，與子組件發送的第一個參數一致。
<Pagination v-on:PaginationToParent="ValueByPagition" ></Pagination>
並且什麼ValueByPagition方法，這個方法接受的參數就是子組件$emit方法中第二個參數
methods:{
ValueByPagition :function(SelectPage){
console.log(SelectPage);//此變數就是子組件$emit方法中第二個參數
}
}
推薦閱讀：