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网页上一页下一页翻页
这几天做项目因为数据太多,需要对信息进行上下翻页展示,就自己写了翻页的代码 大致功能就是页面只显示几条信息,按上一页.下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页 ...
随机推荐
- 将mnist获得的数据还原成图片形式
MNIST是一个手写数字数据集,里面所包含的数据元素是类似于一个1×784矩阵和1×10矩阵的结构,那么,如何将这些数据元素转化为更加直观的图像呢?通过以下python代码,可以实现. from PI ...
- 图片支持get请求访问
BufferedInputStream in = new BufferedInputStream(doc2.getContent());//读取文件到输入流 OutputStream out = re ...
- 搭建真正的zookeeper集群
搭建zookeeper伪分布式集群 zookeeper是Hadop Ecosystem中非常重要的组件,它的主要功能是为分布式系统提供一致性协调服务, 提供的功能包括配置维护,域名服务,分布式同步和组 ...
- ubuntu16.04下latex环境搭建
背景: 最近需要使用latex做一下简历~~~ 工具: sublime text3 (plugin: latextools) + texlive-full 配置: Preferences -> ...
- C++常用数据结构-CString
CString类Str.format(_T(“%d”),number)例子: str.Format(_T("%d"),number);%c 单个字符(char)%d 十进制整数(i ...
- CentOS安装MySQL的完整步骤
1.官方安装文档 http://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 2.下载 Mysql yum包 http://dev.mysql.co ...
- express+websocket+exec+spawn=webshell
var child_process = require('child_process'); var ws = require("nodejs-websocket"); consol ...
- 2. spring定时任务
1.添加命名空间 <!-- 定时注解驱动 --> <task:annotation-driven /> <!-- 进行定时任务的类,将其定义为一个bean --> ...
- Python爬虫与数据分析之模块:内置模块、开源模块、自定义模块
专栏目录: Python爬虫与数据分析之python教学视频.python源码分享,python Python爬虫与数据分析之基础教程:Python的语法.字典.元组.列表 Python爬虫与数据分析 ...
- spring boot 整合quartz ,job不能注入的问题
在使用spring boot 整合quartz的时候,新建定时任务类,实现job接口,在使用@AutoWire或者@Resource时,运行时出现nullpointException的问题.显然是相关 ...