大家下午好，
我有一个无序列表，我想用flexbox应用分页。任何帮助都是非常感谢的:
> <template>
<div id="app">
<ul>
<li v-for="item in items.results" :key="item.id">
{{ item.pub_date }} {{item.image.file}} {{item.title}}
<div class="downloads">
<span
v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
:key="downloadable.id"
>{{ downloadable.document_en.file }}</span>
</div>
</li>
</ul>
</div>
</template>
<style>
</style>
第一步:
创建Pagination.vue组件
<template>
<ul class="pagination">
<li class="pagination-item">
<button type="button" @click="onClickFirstPage" :disabled="isInFirstPage">First</button>
</li>
<li class="pagination-item">
<button type="button" @click="onClickPreviousPage" :disabled="isInFirstPage">Previous</button>
</li>
<li :key="page.id" v-for="page in pages" class="pagination-item">
<button type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled"
:class="{ active: isPageActive(page.name) }">{{ page.name }}</button>
</li>
<li class="pagination-item">
<button type="button" @click="onClickNextPage" :disabled="isInLastPage">Next</button>
</li>
<li class="pagination-item">
<button type="button" @click="onClickLastPage" :disabled="isInLastPage">Last</button>
</li>
</ul>
</template>
<script>
export default {
name: 'pagination',
props: {
maxVisibleButtons: {
type: Number,
required: false,
default: 3
},
totalPages: {
type: Number,
required: true
},
perPage: {
type: Number,
required: true
},
currentPage: {
type: Number,
required: true
}
},
computed: {
isInFirstPage () {
return this.currentPage === 1
},
isInLastPage () {
if (this.totalPages === 0) {
return true
}
return this.currentPage === this.totalPages
},
startPage () {
// When on the first page
if (this.currentPage === 1) {
return 1
}
// When on the last page
if (this.totalPages < this.maxVisibleButtons) {
return 1
}
if (this.currentPage === this.totalPages) {
return this.totalPages - this.maxVisibleButtons + 1
}
// When in between
return this.currentPage - 1
},
endPage () {
if (this.totalPages === 0) {
return 1
}
if (this.totalPages < this.maxVisibleButtons) {
return this.totalPages
}
return Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages)
},
pages () {
const range = []
for (let i = this.startPage; i <= this.endPage; i+= 1 ) {
range.push({
name: i,
isDisabled: i === this.currentPage
})
}
return range
}
},
methods: {
onClickFirstPage () {
this.$emit('pagechanged', 1)
},
onClickPreviousPage () {
this.$emit('pagechanged', this.currentPage - 1)
},
onClickPage (page) {
this.$emit('pagechanged', page)
},
onClickNextPage () {
this.$emit('pagechanged', this.currentPage + 1)
},
onClickLastPage () {
this.$emit('pagechanged', this.totalPages)
},
isPageActive (page) {
return this.currentPage === page
}
}
}
</script>
<style scoped>
.pagination {
list-style-type: none;
float: right;
margin: 10px 0;
}
.pagination-item {
display: inline-block;
}
.active {
background-color: #943849;
color: #ffffff !important;
font-weight: bold;
}
button[disabled], html input[disabled] {
cursor: default;
color: lightgray;
}
</style>
步骤2:在app.vue组件中增加Pagination组件引用
import Pagination from './components/Pagination'
在app.vue中加入Pagination组分
export default {
components: {
Pagination,
},
步骤3:使用分页对象
创建模型数据data() {
return {
items:[],
page: 1,
totalPages: 0,
totalRecords: 0,
recordsPerPage: 10
}
},
步骤4:为加载data创建methods并添加pagination
methods: {
loadPressRelease () {
this.showLoader = true
axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page=${this.page}&page_size=${this.recordsPerPage}&type=5`)
.then(response => {
this.showLoader = false
this.items = response.data
this.totalPages = Math.ceil(response.data.count / this.recordsPerPage)
this.totalRecords = response.data.count
})
},
onPageChange(page) {
this.page = page
this.loadPressRelease()
}
}
第五步:created方法的默认页面加载
created() {
this.loadPressRelease()
},
第六步:HTML模板与pagination引用
<div id="app">
<ul>
<li v-for="item in items.results" :key="item.id">
{{ item.pub_date }} {{item.image && item.image.file}} {{item.title}}
<div class="downloads">
<span v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
:key="downloadable.id">{{ downloadable.document_en.file }}
</span>
</div>
</li>
</ul>
<Pagination v-if="items.results" :total-pages="totalPages" :per-page="this.recordsPerPage" :current-page="page" @pagechanged="onPageChange" />
</div>
DEMO with Loader
这几乎就是状态转发。
创建几个常量:
const ROW_PER_PAGE = 10;
const CURRENT_PAGE = 0;
将它们添加到您的data方法中:
return {
rowPerPage: ROW_PER_PAGE,
currentPage: CURRENT_PAGE,
items: allMyData
}
使用computed属性只返回所需的行数:
computed: {
getPaginatedData() {
const start = this.currentPage * this.rowPerPage;
const end = start + this.rowPerPage;
return this.items.slice(start, end); // end index won't be included
}
}
现在只需在模板中使用这个getPaginatedData
<li v-for="item in getPaginatedData" :key="item.id">
最后一部分是有按钮来改变页面。并且在每次页面更改时，只需更新currentPage变量。