html
<nav class="navigation">
<ul class="pagination">
<li class="Previous" v-on:click="prev">上一页</li>
<li>
<a href="javascript:void(0);" v-for="item in pages" v-on:click="p(item)" v-bind:class="{nowStyle:page == item}"> {{ item }}</a>
</li>
<li class="Next" v-on:click="next">下一页</li>
</ul>
</nav>
css
.navigation {
display: flex;
float: right;
padding-top: 15px;
}
.pagination {
display: flex;
li{
margin-left: 10px;
cursor: pointer;
a{
padding: 2px 6px;
background: #ededed;
margin: 0 4px;
}
a.nowStyle{
background: #3dbff5;
color: #ffffff;
}
}
}
js
export default {
data () {
return {
pages: [],
page: 1,
}
},
created () {
// 页面加载时获取页数
var that = this
var params = {page: 1}
that.$api.post('###', params, function (req) {
that.pages = req.content.pages
})
},
methods: {
// 上一页
prev () {
var that = this
that.page = that.page - 1 < 1 ? 1 : that.page - 1
that.searchs()
},
// 下一页
next () {
var that = this
that.page = parseInt(that.page) + 1 > that.pages ? that.pages : parseInt(that.page) + 1
that.searchs()
},
// 选择第几页
p (p) {
var that = this
that.page = p
that.searchs()
},
// 后台获取页数
searchs () {
var that = this
var params = {page: that.page}
that.$api.post('###', params, function (req) {
that.pages = req.content.pages
})
}
}
}
跳转页数版本
html
<nav class="navigation">
<ul class="pagination">
<li class="Previous" v-on:click="first">首页</li>
<li class="Previous" v-on:click="prev">上一页</li>
<li>
<a href="javascript:void(0);" class="nowStyle"> {{ page }}</a>
</li>
<li><input type="text" class="pageinput" ref="pageinput" @keyup.enter="press"></li>
<li class="Next" v-on:click="next">下一页</li>
<li class="Next" v-on:click="last">尾页</li>
</ul>
</nav>
js
export default {
data () {
return {
pages: [],
page: 1,
lists: [],
pageinput: ''
}
},
created () {
var that = this
var params = {page: 1}
that.$api.post('###', params, function (req) {
that.pages = req.content.pages
})
},
methods: {
// 回车跳转
press () {
var that = this
that.pageinput = that.$refs.pageinput.value
if (that.pageinput <= that.pages) {
that.page = that.pageinput
that.searchs()
}
},
// 首页
first () {
var that = this
that.page = that.page - that.page + 1
that.$refs.pageinput.value = ''
that.searchs()
},
// 尾页
last () {
var that = this
that.page = that.pages
that.$refs.pageinput.value = ''
that.searchs()
},
// 上一页
prev () {
var that = this
that.page = that.page - 1 < 1 ? 1 : that.page - 1
that.$refs.pageinput.value = ''
that.searchs()
},
// 下一页
next () {
var that = this
that.page = parseInt(that.page) + 1 > that.pages ? that.pages : parseInt(that.page) + 1
that.$refs.pageinput.value = ''
that.searchs()
},
searchs () {
var that = this
var params = {page: that.page}
that.$api.post('order/orderList', params, function (req) {
that.lists = req.content.list
that.pages = req.content.pages
})
}
}
}