小女子不才,自定义的分页,若有不当之处还望大佬指正,有更好的方法还望留言
一、html
<template>
<div class="content">
<div class="data-content">
内容展示区域
</div>
//以下为分页样式及事件调用
<div class="page-warpper">
<div class="page page-china page-pre" @click="toPrePage">上一页</div>
<div class="page" v-if="(currentPage > pageCount)||(minPage>1)">···</div>
<template v-for="(item,index) in indexs">
<div class="page"
:class="[item.isShow?'active':'']"
@mouseover="mouseOver(index)"
@mouseleave="mouseOut(index)"
@click="toPage(index)">{
{item.number}}</div>
</template>
<div class="page" v-if="(totalPages > pageCount)&&(currentPage<totalPages)">···</div>
<div class="page page-china page-next" @click="toNextPage">下一页</div>
</div>
</div>
</template>
二、css 根据个人喜好,自定义样式
<style scoped>
.page-warpper{
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
width: 100%;
}
.page{
width: 34px;
height: 34px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
font-size: 16px;
color: #333333;
margin: 0 5px;
border: 1px solid #999999;
border-radius: 6px;
cursor: pointer;
}
.page.page-china{
width: 80px;
}
.page.active{
background-color: #D6E9C6;
color: #F0AD4E;
}
.page.page-china:hover{
background-color: #D6E9C6;
color: #F0AD4E;
}
</style>
三、重要的js
<script>
export default{
data(){
return{
pageCount:4, //一组显示多少个分页数字
currentPage:1, //当前点击的页码
toatalNum:8, //数据返回的总条数,我这里好像没有用到,纯做记录了
pageSize:1, //一页显示多少条数据,后台接口调用时需要
totalPages:8, //返回的总页数
indexs:'', //循环得到当前需要显示的页码的数组对象
minPage:'', //当前显示页码的最小页码
data:'' //接口返回数据
}
},
mounted(){
var that = this
that.setPageNumber() //设置默认显示页码数从1开始
},
methods:{
setPageNumber(){
var that = this
that.indexs = [];
var long = that.currentPage + that.pageCount;
for(var i = that.currentPage;i<long;i++){
if(i == that.currentPage){
that.indexs.push({
isShow : true,
number : i
})
}else{
that.indexs.push({
isShow:false,
number:i
})
}
}
},
mouseOver(index){ //鼠标移入事件
var that = this
that.indexs[index].isShow = true
},
mouseOut(index){//鼠标移出事件
var that = this
if(that.indexs[index].number != that.currentPage){
that.indexs[index].isShow = false
}
},
toPage(index){//点击页面时触发的事件
var that = this
that.indexs[index].isShow = true;
that.indexs.forEach((e,i)=>{
if(e.number == that.currentPage){
e.isShow = false
}
})
that.currentPage = that.indexs[index].number
that.minPage = that.indexs[0].number
},
toNextPage(){//点击下一页时触发的事件
var that = this
if(that.currentPage < that.totalPages){
that.indexs.forEach((e,i)=>{
if(e.number == that.currentPage){
e.isShow = false
}
})
that.currentPage++
}else{
that.currentPage = that.totalPages
that.minPage = that.indexs[0].number
return
}
if(that.currentPage > that.pageCount){
that.indexs = [];
var i = that.currentPage - that.pageCount+1
for(i;i<=that.currentPage;i++){
if(i == that.currentPage){
that.indexs.push({
isShow : true,
number : i
})
}else{
that.indexs.push({
isShow : false,
number : i
})
}
}
}
that.indexs.forEach((e,i)=>{
if(e.number == that.currentPage){
e.isShow = true
}
})
that.minPage = that.indexs[0].number
},
toPrePage(){//点击上一页时触发的事件
var that = this
if(that.currentPage > 1){
that.indexs.forEach((e,i)=>{
if(e.number == that.currentPage){
e.isShow = false
}
})
that.currentPage--
if(that.currentPage >= that.indexs[0].number){
that.indexs.forEach((e,i)=>{
if(e.number == that.currentPage){
e.isShow = true
}
})
that.minPage = that.indexs[0].number
return
}
var i = that.currentPage
var long = that.currentPage + that.pageCount;
that.indexs = [];
for(i;i<long;i++){
if(i==that.currentPage){
that.indexs.push({
isShow : true,
number : i
})
}else{
that.indexs.push({
isShow : false,
number : i
})
}
}
that.minPage = that.indexs[0].number
}else{
that.currentPage = 1
that.minPage = that.indexs[0].number
return
}
}
}
}
</script>