明天我会使用elementUI的Pagination组件模块来编写分页。
需要实现的功能如下。 每页有6条数据。 通过向前和向后翻页，可以分别向前和向后查看内容。 分页组件的页脚可以直接定位到某个页面的内容。 具体要求如右图所示：
1.先写页面结构，再写静态css样式。 完成这两个步骤后，就开始数据渲染。
<template>
<div class="ListComic">
<div v-if="!receiveCartoon">数据加载中。。。</div>
<div v-else>
<ul>
<li v-for="(item,index) in pagesep(page)" :key="index">
<img :src="item.imgSrc" alt="作品图片" @click="newRouterTo('/Detailcomic',{name:item.name})">
<p>{{item.name}}</p>
</li>
</ul>
<div class="block" @click="clickPage($event)">
<el-pagination layout="prev, pager, next" :total="pagenum*10">
</el-pagination>
</div>
</div>
</div>
</template>
2.先获取数据。 由于数据取自后台或假模拟数据elementui分页事件，因人而异，不再展示。
3.然后启动寻呼功能。 我通过两个变量来控制pagenum：分页页面总数和每页显示的数据（取决于变量page），这两个变量都初始化为0；
data() {
return {
page: 0,
pagenum:0
}
},
4. Pagenum 用于统计页脚总数。 通过对得到的数据进行处理elementui分页事件，得到数据项的总数。 由于一页显示6条，最后一页虽然不是6条，但仍算一页，所以向下取整。 （我是一次性请求所有数据，然后就会显示分页功能）
let tem=this.$store.state.comicStore.comicMainData.data.comicItems.length;
this.pagenum=Math.ceil(tem/6);
5.然后用方法来控制每个页面显示的数据。
// 分页，通过vue的动态数据更新获取得到是第几页，然后页面渲染这一页的内容
// 通过page控制展示哪一页的内容
pagesep(page) {
return this.receiveCartoon.slice(page * 6, 6 + page * 6)
},
// 事件委托，点击分页组件，通过e.target获取不同的事件源，然后处理不同的逻辑
clickPage(e) {
// 点击页码
if (e.target.innerHTML) {
this.page=e.target.innerHTML-1;//获取到的文本转化成数值，因为数据渲染用的是数组，而数组下标0开始，所以减一
} else {
// 点击左右箭头
if(e.target.className=="el-icon el-icon-arrow-left"){
if(this.page--<=0)this.page=0;
}
if(e.target.className=="el-icon el-icon-arrow-right"){
if(this.page++>=(this.pagenum-1))this.page=this.pagenum-1;
}
}
}
完整代码如下：
<template>
<div class="ListComic">
<div v-if="!receiveCartoon">数据加载中。。。</div>
<div v-else>
<ul>
<li v-for="(item,index) in pagesep(page)" :key="index">
<img :src="item.imgSrc" alt="作品图片" @click="newRouterTo('/Detailcomic',{name:item.name})">
<p>{{item.name}}</p>
</li>
</ul>
<div class="block" @click="clickPage($event)">
<el-pagination layout="prev, pager, next" :total="pagenum*10">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
page: 0,
pagenum:0
}
},
methods: {
// 分页，通过vue的动态数据更新获取得到是第几页，然后页面渲染这一页的内容
pagesep(page) {
return this.receiveCartoon.slice(page * 6, 6 + page * 6)
},
// 事件委托
clickPage(e) {
if (e.target.innerHTML) {
this.page=e.target.innerHTML-1;//获取到的文本转化成数值，因为前面数组下标0开始，所以减一
} else {
if(e.target.className=="el-icon el-icon-arrow-left"){
if(this.page--<=0)this.page=0;
}
if(e.target.className=="el-icon el-icon-arrow-right"){
if(this.page++>=(this.pagenum-1))this.page=this.pagenum-1;
}
}
},
// 打开空白页
toNewBlank(routerPath, query) {
let routeData = this.$router.resolve({ path: routerPath, query: query });
window.open(routeData.href, '_blank');
},
// 去一个新路由页面，没有target=_blank的功能
newRouterTo(routerPath, query) {
this.$router.push({ path: routerPath, query: query });
}
},
created() {
this.$store.dispatch("comicAxiosAct");
this.$store.state.comicStore.comicState = true;//修改vuex中的数据，应该用mutations来修改
},
destroyed() {
this.$store.state.comicStore.comicState = false;
},
computed: {
receiveCartoon() {
if(!this.$store.state.comicStore.comicMainData)return false;
// 记录分页页数
let tem=this.$store.state.comicStore.comicMainData.data.comicItems.length;
this.pagenum=Math.ceil(tem/6);
// 返回获取到的数据
return this.$store.state.comicStore.comicMainData.data.comicItems;
}
},
}
</script>
<style scoped>
.ListComic {
padding: .15rem 0 .15rem .10rem;
min-height: 1.8rem;
margin-top: 0.9rem;
}
.ListComic ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
min-height: 3.92rem;
}
.ListComic ul li {
width: 1.2rem;
height: 1.8rem;
margin-bottom: .155rem;
}
.ListComic ul li:nth-last-child(1) {
flex: 1;
}
.ListComic ul li img {
height: 1.53rem;
}
.ListComic ul li p {
line-height: .22rem;
width: 1.145rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: .145rem;
color: #333;
margin-top: .05rem;
}
/* 分页 */
.block {
text-align: center;
}
</style>
发表评论