vue实现一个简单的分页功能实例详解
约妲己吃火锅 人气:0这是一个简单的分页功能，只能够前端使用，数据不能通过后台服务器进行更改，能容已经写死了。
下面的内容我是在做一个关于婚纱项目中用到的，当时好久没用vue了，就上网区找了别人的博客来看，发现只有关于element_ui的，基本全是，对自己没用什么用，就自己写了一个，效果如下：
点击相应的按钮切换到对应的内容内容：
下面我只发核心代码，css样式就不发了，自己想怎么写怎么写
<!-- 分页内容 -->
<ul class="blog-lists-box">
<li class="blog-list" :key="index" v-for="(item, index) in dataShow" :class="{ 'alt': index%2 == 1 }">
<div class="card">
<div class="blog-overlay">
<router-link to="/blog/singleBlog">
<figure>
<img :src="img1"/>
<figcaption></figcaption>
</figure>
</router-link>
</div>
<div class="card-body">
<router-link to="/blog/singleBlog">
<h4 class="card-title">{{item.title}}</h4>
</router-link>
<div class="card-footer">
<div class="card-footer-box d-flex">
<div class="author-box">
<a href="#" rel="external nofollow" >
<img :src="header1"/>
<span>{{item.username}}</span>
</a>
</div>
<div class="blog-date text-uppercase">
<i class="fa fa-calendar"></i>
<span>{{item.time}}</span>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- 分页按钮组 -->
<div class="page">
<ul class="pagination clearfix flex-center">
<li class="page-item stic">
<a class="page-link " v-on:click="prePage">Prev</a>
</li>
<li class="page-item" :key="index" v-for="(item, index) in totalPage">
<a class="page-link" v-on:click="toPage(index)" :class="{active: currentPage == index}">{{ index+1 }}</a>
</li>
<li class="page-item">
<a class="page-link" v-on:click="nextPage">Next</a>
</li>
</ul>
</div>下面是vuejs代码可能有点多，但是没关系，这个会了，以后遇到直接就可以拿来用了
data () {
return {
img1: img1,
header1: header1,
listArray: [{
'title': '25 Places To Get The Best Wedding...',
'username': 'liulong',
'time': '2019/12/6'
}, {
'title': '10 Bridal Bouquets You'll Fall In Love...',
'username': 'wangxianhui',
'time': '2019/12/7'
}, {
'title': 'Tips For Choosing The Right Weddi...',
'username': 'chenggang',
'time': '2019/12/8'
}, {
'title': 'Planning The Perfect Bachelorette...',
'username': 'wangwengang',
'time': '2019/12/9'
}, {
'title': 'Top 20 Tips for Wedding Invitat...',
'username': 'yuzhiwei',
'time': '2019/12/10'
}, {
'title': 'Best Tips for the Bride and Groom...',
'username': 'zhaopu',
'time': '2019/12/11'
}],
// 控制每页显示数据的数数量
pageSize: 3,
// 默认显示第几页
currentPage: 0,
// 总数据
totalPage: [],
// 当前显示的数据
dataShow: []
}
},
methods: {
nextPage: function () {
if (this.currentPage === this.pageNum - 1) {
return
}
this.dataShow = this.totalPage[++this.currentPage]
},
prePage: function () {
if (this.currentPage === 0) {
return
}
this.dataShow = this.totalPage[--this.currentPage]
},
toPage: function (page) {
this.currentPage = page
this.dataShow = this.totalPage[this.currentPage]
}
},
created: function () {
this.pageNum = Math.ceil(this.listArray.length / this.pageSize) || 1
for (var i = 0; i < this.pageNum; i++) {
this.totalPage[i] = this.listArray.slice(this.pageSize * i, this.pageSize * (i + 1))
}
this.dataShow = this.totalPage[this.currentPage]
}
加载全部内容