vue 移动端加载更多分页组件_vue中移动端分页组件pagination

最近项目需要用到很简单的vue移动端分页组件，网上找了找，没有特别适合的，根据网上找来的代码，自己写了个简单的分页

根据设计稿，想要的就是最简单的，上一页，下一页，中间固定放三个显示页数的，不需要显示很多，也不需要省略号

效果图如下：

代码如下：

pagination.vue

• 上一页

• 上一页

• {{item}}

• 下一页

• 下一页

• 共{{allPage}}页

name:'pagination',

props: {

currentPage: {//当前第几页

type: Number,default: 1},

allPage: {//总页数

type: Number,default: 5},

showIndex: {//中间显示几个页数，要为奇数

type: Number,default: 3}

},

methods: {

nextPage () {this.$emit('setPage', this.currentPage + 1)

},

prevPage () {this.$emit('setPage', this.currentPage - 1)

},

btnClick (num) {if (num !== this.currentPage) {this.$emit('setPage', num)

}

}

},

computed: {

indexs () {var left = 1

var right = this.allPagevar arr =[]var index = parseInt(this.showIndex / 2)var middleIndex = index + 1

if (this.allPage >= this.showIndex) {if (this.currentPage > middleIndex && this.currentPage < this.allPage -index) {

left= this.currentPage -index

right= this.currentPage +index

}else if (this.currentPage <=middleIndex) {

left= 1right= this.showIndex

}else{

left= this.allPage - (this.showIndex - 1)

right= this.allPage

}

}while (left <=right) {

arr.push(left)

left++}returnarr

}

}

}

ul{

display: flex;

justify-content: center;

align-items: center;

font-size: .24rem;

li{

height: .6rem;

margin: .12rem;

span{

display: block;

padding:0.12rem;

height:100%;

text-align: center;

line-height: .6rem;

color: #E0224F;

border: 1px solid #E0224F;&.disabled{

color: #D8D8D8;

border: 1px solid #D8D8D8;

}

}&.item{

min-width: .6rem;

span{

padding:0;

color: #413134;

border: 1px solid #fff;

}&.active{

span{

color: #E0224F;

border: 1px solid #E0224F;

}

}

}

}

}

}

使用：

import pagination from '@/components/pagination'

export default {

data () {

return {

currentPage: 1,

}

},

methods: {

setPage (page) {

this.currentPage = page

console.log(this.currentPage)

}

}

}