Vue分页及页码跳转
效果如下:
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 pageAll" :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, //每页个数,后台默认15page: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 = eventthis.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 = 1rightNum = showNum// 最右边时结束是总条数,开始是showNum减去1}else{rightNum = this.pageAllleftNum = this.pageAll - (showNum - 1)}}}while (leftNum <= rightNum){pageArray.push(leftNum)leftNum ++}return pageArray}}
划重点:
获取过来的页码数据一定要用Number()格式化一下!防止获取的是字符串而不是数字!T_T
Vue分页及页码跳转相关推荐
- Vue分页页码栏设计
Vue分页页码栏设计 效果展示 HTML 数据需要 函数需要 运用 效果展示 HTML <div class="page_bar no-select"><ul c ...
- html输入页码跳转,WordPress分页导航添加输入页码跳转功能
在年初的时候给一个用户做网站用到了一个输入页码跳转的功能,用户如果需要跳转到那一页只需在输入框中输入相应的页面点击确定就可以跳转到指定页面,这个功能非常棒吧,下面就看看如何使用 php 和 jquer ...
- 【java文本处理】实现一个简单的小说文本阅读器(分页、翻页、页码跳转)
一.目的 读出文本(.txt)内容显示至dos命令窗: 按规定行数将文本进行分页: 在dos下实现文本翻页.页码跳转等功能,形成简单小说阅读器. 二.主要方法 1. RandomAccessFile类 ...
- html jq页面跳转页面,jQuery实现页码跳转式动态数据分页
我们这次给大家带来的是用jQuery实现页码跳转式动态数据分页这个效果,这个效果最明显的就是没有数据加载和刷新页面这个过程,再做小型数据的加载也多级网页加载的时候很有效.我们先来看下实际效果: 下面我 ...
- 项目总结-vue分页组件集成
项目总结-vue分页组件集成 后台管理的大部分页面都需要对数据进行分页显示,但是在每个页面都写分页代码太过冗余,而且当分页出现问题时,需要修改每个页面,所以我集成了一个分页组件,在每个页面直接引用这个 ...
- mysql页码_PHP+MySQL实现输入页码跳转到指定页面功能示例
本文实例讲述了php+mysql实现输入页码跳转到指定页面功能.分享给大家供大家参考,具体如下: 一.代码 conn.php: $id=mysql_connect("localhost&qu ...
- html输入页码跳转,如何为WordPress添加输入页码跳转功能?
最近看到有些网站没有输入页码跳转的功能,使用起来不是很方便,我就想用户如果需要跳转到那一页只需在输入框中输入相应的页面点击确定就可以跳转到指定页面,那么如何为WordPress添加输入页码跳转功能?接 ...
- php未登录跳到登陆页面,vue实现未登录跳转到登录页面的方法
环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给 ...
- vue分页+spring boot +分页插件pagehelper
vue分页+spring boot +分页插件pagehelper https://blog.csdn.net/baidu_38603246/article/details/98854013
最新文章
- Linux之查看组操作
- 换脸火了,我用 Python 快速入门生成模型
- python3.7如何安装库_Python3.7版库的安装以及常用方法(十分简单)
- jvm高并发_在JVM上对高并发HTTP服务器进行基准测试
- array_walk与array_map的区别
- 先进技术android,React Native实战(JavaScript开发iOS和Android应用)/计算机科学先进技术译丛...
- Qt文档阅读笔记-QPropertyAnimation官方解析及实例
- css 浮动 相对定位 绝对定位区别
- WebView学习笔记
- c++\MFC测试代码的运行时间
- 安卓手机无需获取root权限安装桌面版Linux操作系统(非常详细,无计算机基础都可以)
- 无损检测技术知识大全
- 如何成为一名优秀的数据工匠?
- ICM-20602 IMU ACCEL/GYRO/TEMP I2C/SPI LGA
- ggplot2绘制地图
- Android Launcher负一屏实现方案
- cdr 表格自动填充文字_CDR插件表格安装教程
- C语言————鸡兔共有30只,脚共有90只,下面的程序段是计算鸡和兔共有多少只?
- ChatGPT 免费体验来了
- java 防篡改_用JAVA写一个简易图片防篡改