HTML代码:
class="page-bar"> <ul>
<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页a>li>
<li v-if="cur==1"><a class="banclick">上一页a>li>
<li v-for="index in pages" v-bind:class="{ 'active': cur == index}" :key="index.thumb">
<a v-on:click="btnClick(index)" v-bind:class="{ 'active': index}">{{ index }}a>
li>
<li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页a>li>
<li v-if="cur == all"><a class="banclick">下一页a>li>
<li><a>共<i>{{all}}i>页a>li>
ul>
</div>
CSS样式:
/*分页*/ .page-bar{ margin:40px auto; margin-left: 445px; overflow: hidden; } li{ list-style: none } .page-bar li:first-child>a { margin-left: 0px } .page-bar a{ border: 1px solid #ddd; text-decoration: none; position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #5D6062; cursor: pointer; margin-right: 20px; } .page-bar a:hover{ background-color: #eee; } .page-bar a.banclick{ cursor:not-allowed; } .page-bar .active a{ color: #fff; cursor: default; background-color: #E96463; border-color: #E96463; } .page-bar i{ font-style:normal; color: #d44950; margin: 0px 4px; font-size: 12px; }
JS代码:
mounted() { this.getList();},data() { return { goodsList: [ ], pageList: [ ], showList: [ ], all: "", //总页数 cur: 1,//当前页码 pages: [], totalPage: 0,//当前条数 }},methods: { getList() { this.$http.jsonp("http://localhost/vue/goodsList.php").then(result=>{ this.goodsList = result.body; // 1.将有用的数据放入数组 this.goodsList.forEach((item) => { if (item.category_id == 1 || item.category_id == 2 || item.category_id == 3) { this.pageList.push(item); } }); // 2.将分页的数组/4 let pageLength = this.pageList.length; // 数据总长度 this.all = Math.ceil( pageLength / 4); // 往上取整 // 3.将页码数显示出来 for (let i = 1; i <= this.all; i++) { this.pages.push(i); } this.showList = this.pageList.slice(0, 4); }); }, // 4.裁剪数据函数 slicePageList(cur) { console.log(this.pageList); this.showList = this.pageList.slice(((cur - 1) * 4), (cur * 4)); }, // 5.下一页和上一页 pageClick() { this.slicePageList(this.cur); }, // 6.鼠标点击页数 btnClick(index) { this.slicePageList(index); this.cur = index; console.log(this.cur); } }
-----------------------------效果图-----------------------------------