帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» vue分页效果代码
vue分页效果代码
浏览:706次
-
评论:1次
-
发布时间:2018-03-19
Html
Css
Js
{{i}}
首页
上一页
...
{{k+1}}
...
下一页
尾页
第{{idx+1}}页
总页数{{max}}
.content ul { width:200px; margin:100px auto; border:1px solid #000; } ul,li { list-style:none; margin:0; padding:0; } .f_left { float:left; } .clearfix:after { content:''; display:block; clear:both; height:0; visibility:hidden; } .page_bar { margin:100px auto; text-align:center; } .page_bar a,.page_bar span { display:inline-block; padding:5px 12px; border:1px solid gray; margin:0; text-decoration:none; letter-spacing:0; word-spacing:0; border-radius:4px; } .page_bar .page { margin:0 2px; } .page_bar .page.active { background:gray; color:#fff; } [v-cloak] { display:none; }
new Vue({ el: '#app', data: { data: [], pageDataNum: 6, idx: 0, idxRange: 6, ellipsis1: false, ellipsis2: false }, mounted: function() { for (var i = 0; i <= 88; i++) { this.data.push(i); } }, methods: { pageTurning: function(str) { if (str === "next") { if (this.idx < this.max - 1) { this.idx++; } } else if (str === "before") { if (this.idx > 0) { this.idx--; } } else if (typeof str === "number") { this.idx = str; } }, range: function(k) { var idxStart; var idxEnd; if (!(this.idxRange % 2)) { this.idxRange -= 1; } var x = this.idxRange / 2; //尾部区间 if (this.idx > (this.max - (this.idxRange - 1))) { idxStart = this.max - this.idxRange; idxEnd = this.max - 1; this.ellipsis1 = true; this.ellipsis2 = false; } // 中间区间 if (this.idx > x && this.idx <= (this.max - (this.idxRange - 1))) { idxStart = this.idx - x; idxEnd = this.idx + x; this.ellipsis1 = true; this.ellipsis2 = true; } // 开始区间 if (this.idx < x) { idxStart = 0; idxEnd = this.idxRange; this.ellipsis1 = false; this.ellipsis2 = true; } if (idxStart && idxEnd) { return k <= idxEnd && k >= idxStart; } else { return k < this.idxRange; } } }, computed: { max: function() { return Math.ceil(this.data.length / this.pageDataNum); }, start: function() { return this.idx * this.pageDataNum; }, end: function() { return (this.idx + 1) * this.pageDataNum; }, pageData: function() { return this.data.slice(this.start, this.end); } } });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>vue分页效果代码-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:一个使用vue开发的分页代码
TABLE表格无缝向上滚动特效
原生js写的树形下拉菜单效果
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv2 入门
馒***记
2018年05月30日
实用666!!!!
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
706
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值