大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
效果如下:
HTML:
<ul class="page f16 tc mt30">
<li>
<span v-if="page > 1"><b @click="page--,pageClick()">上一页</b></span>
<span v-if="page == 1">上一页</span>
<span v-for="index in pagesAll" :key="index" :class="{'active':page == index}" @click="goPage(index)">{
{index}}</span>
<span v-if="page!=pageAll"><b @click="page++,pageClick()">下一页</b></span>
<span v-if="page == pageAll">下一页</span>
</li>
<li>共{
{pageAll}}页</li>
<li>到<input type="text" class="int02" v-model="jumpPage"> 页<input type="button" class="bt03" value="确定" @click="goPage(jumpPage)"></li>
</ul>
CSS:
.page li{display:inline-block;margin:0 5px;}
.page li span{display:inline-block;padding:5px 10px;border:1px solid #dfdfdf;margin:0 5px;border-radius:5px;cursor:pointer;}
.page li span.active,.page li span:hover{border:1px solid #316dd9;background:#316dd9;color:#fff;}
.page b{display:block;font-weight:normal;}
.page .int02,.page .bt03{line-height:32px;border:1px solid #ccc;vertical-align:middle;margin:0 10px;border-radius:5px;}
.page .int02{width:40px;text-align:center;}
.page .bt03{background:#316dd9;color:#fff;border:none;padding:0 30px;line-height:36px;margin-left:20px;}
JS:
data(){
return{
listData:"",//旅行社列表数据搜索结果数据
// pageSize:15, //每页个数,后台默认15
page:1,//当前页码,不传默认第一页
pageAll:"", //数据总页数
jumpPage:"",//跳转页码
}
},
methods:{
//获取旅行社列表数据 keywords words搜索关键字,region_id id区域id,page onPage当前页码
getTravel(event){
....数据列表获取.....
if (response.data.status==1) {
console.log(response.data.data);
this.pageAll = response.data.data.count;
this.listData = response.data.data.data;
}else{
console.log(response.data.info);
}
....数据列表获取.....
},
//点击上一页下一页
pageClick(){
this.getTravel(this.page); //获取列表数据
window.scrollTo(0,500); //页面滚动到顶部
},
//点击页码或跳转指定页码
goPage(event){
if(event != this.page && event != ""){
this.page = event
this.getTravel(this.page); //获取列表数据
window.scrollTo(0,500); //页面滚动到顶部
}
},
},
computed: {
pagesAll(){
// 开始数字
var leftNum = 1;
// 结束数字
var rightNum = this.pageAll;
// 存储页码数组
var pageArray = [];
// 显示页码的数量 最好是个单数
var showNum = 5;
// 因为是单数向上取整获取到中间的数字
var centerNum = Math.ceil(showNum/2);
// 判断分析当总页数超过showNum展示页数时,需要判断分页情况
//1、在最左边第一个或者在centerNum的前面
//2、在中间
//3、最右边最后一个
if(this.pageAll >= showNum){
// 中间centerNum时左右都加上(centerNum-1)
if(this.page > centerNum && this.page < this.pageAll - (centerNum - 1)){
//一定要用Number格式化一下获取的数据,防止获取的是字符串而不是数字
leftNum = Number(this.page) - (centerNum - 1)
rightNum = Number(this.page) + (centerNum - 1)
}else{
//最左边或者在showNum的中间
if(this.page <= centerNum){
leftNum = 1
rightNum = showNum
// 最右边时结束是总条数,开始是showNum减去1
}else{
rightNum = this.pageAll
leftNum = this.pageAll - (showNum - 1)
}
}
}
while (leftNum <= rightNum){
pageArray.push(leftNum)
leftNum ++
}
return pageArray
}
}
划重点:
获取过来的页码数据一定要用Number()格式化一下!防止获取的是字符串而不是数字!T_T
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194127.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...