vue翻页器,包括上一页,下一页,跳转
翻页组件 -- 子组件
<template>
<div class="pager-wrapper" ref="pager">
<div class="pager-box">
<a class="pager-prev" :class="{'pager-disabled':prevDisable}" href="javascript:void(0)" @click="jumpPrev()">上一页</a>
<template v-for="(i,index) in pageSize">
<span v-if="i==pageNo" class="pager-curr" :key="index">
<em class="pager-em"></em>
<em>{{i}}</em>
</span>
<a v-else-if="pageNo<5&&(i)<6" href="javascript:void(0)" @click="jump(i)" :key="index">
{{i}}
</a>
<a v-else-if="pageSize<7||i==1||i==pageSize||(pageNo-2<=i&&i<=pageNo+2)" href="javascript:void(0)" @click="jump(i)" :key="index">
{{i}}
</a>
<template v-else>
<span v-if="pageNo<5&&i==6" class="pager-spr" :key="index">…</span>
<span v-if="pageNo==4&&i==7" class="pager-spr" :key="index">…</span>
<span v-if="pageNo>4&&i==pageNo-3" class="pager-spr" :key="index">…</span>
<span v-if="pageNo>4&&i==pageNo+3" class="pager-spr" :key="index">…</span>
</template>
</template>
<a class="pager-next" :class="{'pager-disabled':nextDisable}" href="javascript:void(0)" @click="jumpNext()">下一页</a>
</div>
<div class="pager-input">
<div>跳转到:</div>
<input type="text" v-model="jumpPage">
<a class="pager-btn-go" href="javascript:void(0)" @click="Go()">GO</a>
</div>
</div>
</template> <script>
export default {
model: { // 通过v-model传过来的参数
prop: 'pageNo',
event: 'jumpPage'
},
props: {
pageSize: {
type: Number,
default: 1
},
pageNo: { // 通过v-model传过来的参数
type: Number,
default: 1
}
},
data () {
return {
jumpPage: '' // 避免操作props参数
}
},
computed: {
prevDisable: function () { // “上一页”按钮是否可点
if (this.pageNo > 1) {
return false
} else {
return true
}
},
nextDisable: function () { // “下一页”按钮是否可点
if (this.pageNo < this.pageSize && this.pageSize > 1) {
return false
} else {
return true
}
}
},
methods: {
jumpPrev: function () { // 点击上一页
if (this.pageNo === 1) {
return false
} else {
this.$emit('jumpPage', this.pageNo - 1)
}
},
jumpNext: function () { // 点击下一页
if (this.pageNo === this.pageSize) {
return false
} else {
this.$emit('jumpPage', this.pageNo + 1) // 修改当前页码
}
},
jump: function (id) { // 直接跳转
if (id > this.pageSize) {
id = this.pageSize
}
this.jumpPage = ''
this.$emit('jumpPage', id) // 修改当前页码
},
Go: function () {
if (this.jumpPage === '') { // 判空处理
return false
} else if (/^\d*$/.test(parseInt(this.jumpPage))) { // 填写数字才能跳转
this.jump(parseInt(this.jumpPage))
this.jumpPage = ''
} else {
this.jumpPage = ''
return false
}
}
}
}
</script> <style scoped lang="stylus" type="text/stylus">
@import "~styles/varibles.styl"
.pager-wrapper
float right
display flex
flex-direction row
height 38px
.pager-box
margin-top -15px
a,span
display inline-block
width 38px
height 38px
margin 0 2px
border 1px solid #E5E5E5
color #bdbdbd
text-align center
font 14px/38px ""
em
color $bgColor
.pager-prev,.pager-next
width 78px
.pager-input
display flex
flex-direction row
height 38px
margin-left 20px
font 14px/40px ""
color #bdbdbd
input,.pager-btn-go
display inline-block
width 40px
height 40px
border 1px solid #E5E5E5
box-sizing content-box
outline none
text-align center
</style> 父组件
<pager :pageSize="pageSize" v-model="pageNo" @jumpPage="jump"></pager>
//组件引入
import pager from '../../component/pager/pager.vue'
//组件调用声明
components:{ pager}
//参数
data () {
return {
pageSize: 30, //总页数 -- 后台传值
pageNo: 2 //当前页
}
}
//接收跳转事件
methods:{
jump (id) {
console.log(id)
}
}
vue翻页器,包括上一页,下一页,跳转的更多相关文章
- Android ListView上拉获取下一页
关于ListView上拉刷新的需求很多,实现方式也多种多样. 一般是简单的通过一个page变量来控制当前请求的页数,然后上拉的时候就发送请求. 实现出来后,经过测试哥的折腾,发现有诸多细节没有处理好, ...
- nodejs爬虫笔记(五)---利用nightmare模拟点击下一页
目标 以腾讯滚动新闻为例,利用nightmare模拟点击下一页,爬取所有页面的信息.首先得感谢node社区godghdai的帮助,开始接触不太熟悉nightmare,感觉很高大上,自己写代码的时候问题 ...
- easyUI pagination分页控件点击下一页后跳转到最后一页
easyui-pagination点击下一页直接跳转到最后一页的可能原因 今天做到聊天记录展示页面的时候发现一个bug:初次进入页面加载出第一页的数据,点击下一页的时候不是到第二页而是到最后一页. 如 ...
- (java)selenium webdriver学习,选择模块,点击下一页,获取当前url
selenium webdriver学习,选择模块,点击下一页,获取当前url 查找下一页有多种方法,这里列举两种: isSelected()函数用于判断是否点击选中,返回Boolean类型 impo ...
- wordpress文章显示同一分类下的上一篇下一篇
我们在用wordpress开发网站的时候会在文章页中引入上一篇下一篇,但是发现新闻页的上下文章有可能是产品分类的post,这个就不太合理,如何显示同一分类下的上一篇下一篇文章呢?随ytkah一起来看看 ...
- tp3.2上一篇下一篇功能
1. 后台 //上一页 $map1['a_id'] = array('gt',$a_id); $map1['cate_id'] = array('eq',$cate_id); $front=$arc- ...
- 一款易用、高可定制的vue翻页组件
一款易用.高可定制的vue翻页组件 在线体验:pages.cixi518.com 使用 npm i vo-pages --save vo-pages组件父元素必须设置固定高度并填写属性overflow ...
- jsp实现上一页下一页翻页功能
前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需 ...
- php网页上一页下一页翻页
这几天做项目因为数据太多,需要对信息进行上下翻页展示,就自己写了翻页的代码 大致功能就是页面只显示几条信息,按上一页.下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页 ...
随机推荐
- 关于mybatis中传入一个List,字符串数组,或者Map集合作为查询条件的参数
一.入参为List的写法: <select id="queryParamList" resultType="map" parameterType=&quo ...
- sybase解决死锁
解决Sybase数据库死锁的方法 https://blog.csdn.net/lileizhang/article/details/45816509
- sudo 取消密码
通常我们并不以root身份登录,但是当我们执行某些命令 (command)时需要用到root权限,我们通常都是用"sudo command"来执行command.由于使用Ubunt ...
- SSM框架-MyBatis框架数据库的增删查改操作
话不多说,在User.xml文件中主要写一下操作数据库的sql语句,增,删,查,改是最常见的数据库操作 User.xml文件下:
- 高性能网络通信框架 HP-Socket v5.2.1
项目主页 : http://www.oschina.net/p/hp-socket 开发文档 : http://www.docin.com/p-2079016612.html 下载地址 : https ...
- TestNG+Java+Selenium+Maven 代码实例
搭环境时注意不要忘记testng的jar包,selenium的jar包 package com.guge.test; import org.testng.annotations.Test;import ...
- 配置samba的流程
1.关闭防火墙和selinuxservice iptables stopsetenforce 02.配置本地yummount /dev/cdrom /mediacd /etc/yum.repos.dc ...
- 【python】django上传文件
参考:https://blog.csdn.net/zahuopuboss/article/details/54891917 参考:https://blog.csdn.net/zzg_550413470 ...
- 通过TCPView工具查看foxmail用exchange方式连接exchange时用什么端口
TCPView下载地址 https://docs.microsoft.com/zh-cn/sysinternals/downloads/tcpview
- Spring MVC 注解之controller层
第一层注解:@Controller 和 @RestController. 这两个注解的作用是:处理页面的HTTP请求,不同点 @RestController相当于@Controller +@Respo ...