html页面划分技术vue.js,利用html+vue.js 实现一个兼容IE浏览器的分页功能

利用html+vue.js 实现一个兼容IE浏览器的分页功能

发布时间：2020-11-09 15:15:35

来源：亿速云

阅读：78

作者：Leah

利用html+vue.js 实现一个兼容IE浏览器的分页功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

先看一下实现效果：

上代码：

1.简单搞一搞 CSS，此处代码有折叠

2.简单搞一搞 HTML

第{{pageIndex}}页, 每页显示{{pageSize}}条

共{{dataListLength}}条

• <

• {{item}}

• >

{{pageSize}}条/页

• {{item}}条/页

跳至 

 页 

button @click="handleGoToPage">确定

3.搞事情啦 ~~~~

首先分析一下分页功能的实现思路：首页和尾页始终显示，

通过数据总条数dataListLength及每页显示条数pageSize，计算出总页数pageTotalNum

监听watch一下，每页显示条数pageSize，重置当前页码pageIndex=1

我设计的分页每次最多显示5个页码(大家可根据需求自行调整)，剩余部分 ... 代替，并设置不可点击，

根据不同的总页数和当前页码的切换，页签展示形态有所不同，展示形态如下图对应序号展示总页数 <= 1，不显示分页器

总页数 <= 5 && 总页数 > 1，显示全部页码

总页数 > 5 && 当前页面 <= 3 , 倒数第二个页码为...,页码从左往右计算

总页数 > 5 && 当前页面 > 3 && 当前页 < 总页数 - 3 , 正倒数第二个页码都为..., 页码以当前页码计算，±1

总页数 > 5 && 当前页面 > 3 && 当前页 > 总页数 - 3 , 正数第二个页码为..., 页码从右往左计算

var app = new Vue({

el: "#app",

data: {

pageIndex: 1,

goToPage: '',

// pageTotalNum: 16,

dataListLength:147,

pageSize:20,

pageSizeList:[20,30,50,100],

showOption:false

},

methods: {

prevOrNext: function(n) {

this.pageIndex += n

this.pageIndex <= 1 ? this.pageIndex = 1 : this.pageIndex > this.pageTotalNum ? this.pageIndex = this.pageTotalNum : null

},

selectPage: function(n) {

if (n === this.pageIndex) return

if (typeof n === 'string') return

this.pageIndex = n

},

handleGoToPage: function() {

this.pageIndex = this.goToPage <= 1 ? 1 : this.goToPage - 0 >= this.pageTotalNum - 0 ? this.pageTotalNum :

this.goToPage

this.goToPage = this.pageIndex

},

},

computed: {

pageTotalNum:function(){

return this.dataListLength % this.pageSize == 0 ? this.dataListLength / this.pageSize : Math.floor(this.dataListLength / this.pageSize) + 1

},

pages: function () {

// 每次最多显示5个页码

var c = this.pageIndex

var t = this.pageTotalNum

var p = []

for (var i = 1; i <= t; i++) {

p.push(i)

}

var l = p.length

if (l <= 5) { // 总页数<=5，显示全部页码

return p

} else if (l > 5 && c <= 3) { // 总页数>5 && 当前页面<=3

return [1, 2, 3, 4, '...', t]

} else if (l > 5 && c > 3 && c <= l - 2) { // 总页数 > 5 && 当前页面 > 3 && 当前页 < 总页数 - 3

return [1, '...', c - 2, c - 1, c, '...', t]

} else { // 总页数 > 5 && 当前页面 > 3 && 当前页 > 总页数 - 3

return [1, '...', t - 3, t - 2, t - 1, t]

}

},

},

watch:{

pageSize:function(nv,ov){

this.pageIndex = 1

}

}

});

关于利用html+vue.js 实现一个兼容IE浏览器的分页功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。