vue+bootstrap模拟分页器
借鉴，https://blog.****.net/illusion_melody/article/details/82714793
效果：
代码
html:
<div class="col-lg-10 col-md-10 col-sm-10">
<p style="padding: 10px;border-left: 1px solid #ccc;">新闻中心</p>
<ul class="article-content-ul">
<li v-for="list in dataShow">
<div class="col-lg-4 col-md-4">
<img :src="list.imgUrl" />
</div>
<div class="col-lg-8 col-md-8">
<p style="font-weight: 700;">{{list.title}}</p>
<span>{{list.content}}</span>
<samp>{{list.time}}</samp>
</div>
</li>
</ul>
<!--分页-->
<div id="page-break">
<ul>
<li v-if="currentPage > 1">
<a v-on:click="prePage()">上一页</a>
</li>
<li v-if="currentPage == 1">
<a class="banclick">上一页</a>
</li>
<!--<li v-for="item in pageNum" v-bind:class="{'active':currentPage == item}">
<a v-on:click="btnClick(item), pageClick()">{{item}}</a>
</li>-->
<li>
<a>
{{currentPage}}
</a>
</li>
<li v-if="currentPage != pageNum">
<a v-on:click="nextPage()">下一页</a>
</li>
<li v-if="currentPage == pageNum">
<a class="banclick">下一页</a>
</li>
<li><a>共<i>{{currentPage}}/{{pageNum}}</i>页</a></li>
<div class="jumpbox">
<input type="number" class="jumppage" />
<a class="jumpbtn" v-on:click="pageSkip()">跳转</a>
</div>
</ul>
</div>
</div>css:
.article-content-ul li{
display: inline-table;
}
.article-content-ul li img{
width: 220px;
}
.article-content-ul samp{
display: block;
}
/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* 火狐 */
input[type="number"]{
-moz-appearance: textfield;
}
#page-break{margin-top: 20px;margin-left: 20px;}
#page-break ul{text-align: center}
#page-break li{list-style: none;}
#page-break a{border: 1px solid #ddd; text-decoration: none;float: left;padding: 6px 12px;color: #337ab7;cursor: pointer}
#page-break a:hover{background-color: #eee;}
#page-break a .banclick{cursor: not-allowed;}
#page-break .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
#page-break i{font-style: normal;color: #d44950;margin: 0px 4px;font-size: 12px;}
#page-break .jumpbox .jumppage {border: 1px solid #ddd; margin-left: 40px; height: 33px; width: 40px; float: left;}
#page-break .jumpbox .jumpbtn {cursor: pointer; margin-left: 10px;}
#page-break .jumpbox .jumpbtn:active {color: #337ab7;}
js:
data(){
return{
fieldData:[
{id:0,imgUrl:require("@/assets/christmas-025.jpg"),title:"1快快网络关于2019年春节放假通知",content:"尊敬的快快网络用户：您好！春节将至，快快网络携全体员工祝您新春快乐，阖家幸福！首先，感谢您长久以来的信任与支持，也预祝我们2019年继续合作顺利！！快快春节放假时间为：2019年2月3日至2019年2月10日，共8天。 2019年2月11日（正月初七）正常上班。 ...",time:"2019-3-30"},
{id:1,imgUrl:require("@/assets/christmas-026.jpg"),title:"2快快网络关于2019年春节放假通知",content:"尊敬的快快网络用户：您好！春节将至，快快网络携全体员工祝您新春快乐，阖家幸福！首先，感谢您长久以来的信任与支持，也预祝我们2019年继续合作顺利！！快快春节放假时间为：2019年2月3日至2019年2月10日，共8天。 2019年2月11日（正月初七）正常上班。 ...",time:"2019-3-30"},
{id:2,imgUrl:require("@/assets/christmas-027.jpg"),title:"3快快网络关于2019年春节放假通知",content:"尊敬的快快网络用户：您好！春节将至，快快网络携全体员工祝您新春快乐，阖家幸福！首先，感谢您长久以来的信任与支持，也预祝我们2019年继续合作顺利！！快快春节放假时间为：2019年2月3日至2019年2月10日，共8天。 2019年2月11日（正月初七）正常上班。 ...",time:"2019-3-30"},
{id:3,imgUrl:require("@/assets/christmas-025.jpg"),title:"4快快网络关于2019年春节放假通知",content:"1尊敬的快快网络用户：您好！春节将至，快快网络携全体员工祝您新春快乐，阖家幸福！首先，感谢您长久以来的信任与支持，也预祝我们2019年继续合作顺利！！快快春节放假时间为：2019年2月3日至2019年2月10日，共8天。 2019年2月11日（正月初七）正常上班。 ...",time:"2019-3-30"},
{id:4,imgUrl:require("@/assets/christmas-026.jpg"),title:"5快快网络关于2019年春节放假通知",content:"1尊敬的快快网络用户：您好！春节将至，快快网络携全体员工祝您新春快乐，阖家幸福！首先，感谢您长久以来的信任与支持，也预祝我们2019年继续合作顺利！！快快春节放假时间为：2019年2月3日至2019年2月10日，共8天。 2019年2月11日（正月初七）正常上班。 ...",time:"2019-3-30"},
{id:5,imgUrl:require("@/assets/christmas-027.jpg"),title:"6快快网络关于2019年春节放假通知",content:"1尊敬的快快网络用户：您好！春节将至，快快网络携全体员工祝您新春快乐，阖家幸福！首先，感谢您长久以来的信任与支持，也预祝我们2019年继续合作顺利！！快快春节放假时间为：2019年2月3日至2019年2月10日，共8天。 2019年2月11日（正月初七）正常上班。 ...",time:"2019-3-30"},
{id:6,imgUrl:require("@/assets/christmas-025.jpg"),title:"7快快网络关于2019年春节放假通知",content:"1尊敬的快快网络用户：您好！春节将至，快快网络携全体员工祝您新春快乐，阖家幸福！首先，感谢您长久以来的信任与支持，也预祝我们2019年继续合作顺利！！快快春节放假时间为：2019年2月3日至2019年2月10日，共8天。 2019年2月11日（正月初七）正常上班。 ...",time:"2019-3-30"},
{id:7,imgUrl:require("@/assets/christmas-026.jpg"),title:"8快快网络关于2019年春节放假通知",content:"1尊敬的快快网络用户：您好！春节将至，快快网络携全体员工祝您新春快乐，阖家幸福！首先，感谢您长久以来的信任与支持，也预祝我们2019年继续合作顺利！！快快春节放假时间为：2019年2月3日至2019年2月10日，共8天。 2019年2月11日（正月初七）正常上班。 ...",time:"2019-3-30"},
{id:8,imgUrl:require("@/assets/christmas-027.jpg"),title:"9快快网络关于2019年春节放假通知",content:"1尊敬的快快网络用户：您好！春节将至，快快网络携全体员工祝您新春快乐，阖家幸福！首先，感谢您长久以来的信任与支持，也预祝我们2019年继续合作顺利！！快快春节放假时间为：2019年2月3日至2019年2月10日，共8天。 2019年2月11日（正月初七）正常上班。 ...",time:"2019-3-30"},
],//接收后端的所有数据
// 所有页面的数据
totalPage: [],
// 每页显示数量
pageSize: 2,
// 共几页
pageNum: "",
// 当前显示的数据
dataShow: [],
// 默认当前显示第一页,显示的页数
currentPage: 1
}
},
methods:{
//计算页数
btnNum: function(){
// 根据后台数据的条数和每页显示数量算出一共几页
this.pageNum = Math.ceil(this.fieldData.length / this.pageSize);
// 如果后台数据的条数小于每页显示数量，则只有一页，显示数量就为后台传来的
if (this.fieldData.length < this.pageSize) {
this.pageSize = this.fieldData.length;
}
},
//根据页数对数据分组，并存进每一页
eachpage: function(){
for (let i = 0; i < this.pageNum; i++) {
// 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
this.totalPage.push([]);
// 根据每页显示数量 将后台的数据分割到 每一页， 如第一页是0-5条，第二页是6-10条...
this.totalPage[i].push(
// slice操作分割出来的是一个数组
this.fieldData.slice(this.pageSize * i, this.pageSize * (i + 1))
);
// 我们把数组里头的内容作为每一页的内容
this.totalPage[i] = this.totalPage[i][0];
console.log(this.totalPage[i])
}
// 当前显示的内容
this.dataShow = this.totalPage[this.currentPage - 1];
console.log(this.totalPage[this.currentPage])
},
// 当前显示的内容
// 上一页和下一页
// 下一页
nextPage() {
this.dataShow = this.totalPage[++this.currentPage - 1];
},
// 上一页
prePage() {
this.dataShow = this.totalPage[--this.currentPage - 1];
},
//输入数字跳转
pageSkip(){
let skipPage = Number(document.getElementsByClassName("jumppage")[0].value);
if(!skipPage){
alert("请输入跳转页码");
return;
}else if(skipPage < 1 || skipPage > this.pageNum){
alert("您输入的页码超过页数范围了！")
return;
}else{
this.btnClick(skipPage);
}
}
},
created: function(){
this.btnNum();
this.eachpage();
},