省略号分页原理html,Vue 实用分页组件paging(页数太多时显示省略号)

2017年6.26更新:

之前的版本在页数太多时依然每一页都显示,这显然不合理。增强版在页数太多时会显示省略号,且把分页组件单独提取出来,可以直接在其他页面引入使用。代码见: Paging.vue

—————————————下面是之前的版本————————————

直接上代码。只有一个小小的需要注意的点:vue1.x的v-for循环是从0开始,遵从了程序语言设计的一贯的做法,而vue2.x是从1开始的,符合我们平常的习惯。用下来还是vue2.x的做法方便一些,不需要绕一下子了。

//html

prev

next

//js

var paging = new Vue({

el: '#paging',

data: {

sum: 4, //总页数

curPage: 1, //当前页

},

methods: {

getBooks: function(page){

//页面初始化函数

},

switchPage: function(page){

var vm = this;

if(page < 1) {

page = 1;

} else if(page > vm.sum) {

page = vm.sum;

}

vm.getBooks(page);

vm.curPage = page;

},

}

})

//css

span {

display: inline-block;

margin: 3px;

width: 35px;

height: 35px;

line-height: 35px;

text-align: center;

color: pink;

background: #fff;

border-radius: 5px;

}

span.current-page,

span:hover {

color: #fff;

background: pink;

}

bVL0ly?w=406&h=78

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值