vue.js分页---转自前端网
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Vuejs-分页</title>
<style type="text/css">
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
html {
font-size: 12px;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
q:before,
q:after {
content: '';
}
object,
embed {
vertical-align: top;
}
hr,
legend {
display: none;
}
img,
abbr,
acronym,
fieldset {
border: 0;
}
ul li {
list-style-type: none;
}
a,
label {
cursor: pointer;
}
img {
vertical-align: bottom;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
.clearfix {
*zoom: 1;
}
input,
textarea,
select {
outline: none;
border: 1px solid #bfbfbf;
}
th {
font-weight: 400;
}
button {
cursor: pointer;
border: none;
outline: none;
}
textarea {
border: 1px solid #ccc;
resize: none;
outline: none;
overflow: hidden;
padding: 5px;
}
select {
outline: none;
}
.text_overflow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html {
font-family: "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
font-size: 14px;
color: #5c5d5e;
}
/* 公共分页模块 */
.index-page {
width: 800px;
height: 40px;
margin: 100px auto;
padding-top: 10px;
}
.index-page .index-target {
width: 25px;
height: 14px;
line-height: 14px;
padding: 3px 5px;
border-radius: 2px;
vertical-align: middle;
}
.index-page .target {
margin-right: 30px;
color: #808080;
}
.index-page .page-main {
float: right;
margin-top: -10px;
}
.index-page .page-main li {
float: left;
width: 37px;
height: 37px;
border: 1px solid #e6e6e6;
text-align: center;
line-height: 37px;
margin-right: 5px;
}
.index-page .page-main .block {
display: block;
}
.index-page .page-main a {
display: block;
height: 100%;
color: #c0c0c0;
}
.index-page .page-main a:hover,
.index-page .page-main .active {
background-color: #f75000;
color: #fff;
}
.index-page .page-main .unable-page {
cursor: not-allowed;
background-color: #dedede;
}
.index-page .page-main .unable-page:hover {
background-color: #dedede;
}
.index-page .page-main .prev,
.index-page .page-main .next {
display: block;
height: 9px;
padding: 13px 14px 15px 15px;
}
.index-page .page-main .prev-i,
.index-page .page-main .next-i {
display: block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 8px solid #c0c0c0;
border-bottom: 6px solid transparent;
}
.index-page .page-main .next-i {
border-top: 6px solid transparent;
border-right: none;
border-left: 8px solid #c0c0c0;
border-bottom: 6px solid transparent;
}
.index-page .ellipsis {
line-height: 32px;
border: none !important;
}
.index-page .ellipsis:hover {
color: #c0c0c0 !important;
cursor: pointer !important;
background: #fff !important;
}
.info-box {
width: 800px;
padding: 20px 50px;
margin: 50px auto;
border: 2px dotted #e6e6e6;
text-align: center;
}
.info-header {
line-height: 2;
font-size: 28px;
}
</style>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div>
<div class="info-box">
<p class="info-header" v-html="goodsList.updatetime"></p>
<p class="info-con" v-html="goodsList.content"></p>
</div>
</div>
<div class="index-page"
}]
}
};
var vue = new Vue({
el: 'body',
data: {
page: 1, //当前页面
pageTotal: 12, //总页数
showPage: 10, //最多显示10个num-item
showPageArr: [], //显示的num-item数组
goodsList: {}, //商品数据
showLeftEllipsis: false,
showRightEllipsis: false
},
ready: function() {
var oThis = this;
this.pageTotal = data['result']['data'].length;
if(this.pageTotal <= this.showPage) {
this.showPage = this.pageTotal;
}
this.showPageFn();
$(document).on('click', '.num-item', function() {
oThis.page = parseInt($(this).attr('data-page'));
oThis.showPageFn();
});
},
methods: {
getData: function() {
this.goodsList = data['result']['data'][this.page - 1];
},
showPageFn: function() {
debugger;
var min = 0,
max = this.showPage;
this.showLeftEllipsis = this.showRightEllipsis = false;
this.showPageArr = [];
if(this.page <= this.showPage / 2) {
min = 0;
max = this.showPage;
} else if(this.pageTotal - this.page <= Math.ceil(this.showPage / 2)) {
min = this.pageTotal - this.showPage;
max = this.pageTotal;
} else {
min = Math.round(this.page - this.showPage / 2);
max = Math.round(this.page + this.showPage / 2);
}
for(var i = min + 1; i < max + 1; i++) {
this.showPageArr.push(i);
}
if(this.showPageArr[0] > 1) {
this.showLeftEllipsis = true;
}
if(this.showPageArr[this.showPageArr.length - 1] < this.pageTotal) {
this.showRightEllipsis = true;
}
this.getData();
},
goPre: function() {
if(this.page == 1) {
return;
}
this.page--;
this.showPageFn();
},
goNext: function() {
if(this.page == this.pageTotal) {
return;
}
this.page++;
this.showPageFn();
},
inputJump: function() {
var value = $('.index-target').val();
if(parseInt(value) < 1 || parseInt(value) > this.pageTotal || value.trim() == '') {
this.page = 1;
} else {
this.page = parseInt(value);
}
$('.index-target').val('')
this.showPageFn();
}
}
});
</script>
</body>
</html>
- 上一篇 »javascript笔记——前端实现分页和查询
- 下一篇 »Vue之前端页面使用json编辑框
