vue实现分页功能jiexi

ゝ一世哀愁。 2023-06-12 09:29 17阅读 0赞

首先我们先定义好分页效果

<div class="common-seo-page-box clearfix align-center assist">
        <ul class="page-center">
    		<li v-if="currentPage>0"><a v-on:click="prePage">上一页</a></li>
    		<li v-if="currentPage==0"><a class="banclick">上一页</a></li>
    		
    		<li v-for="(item, index) in pageNum" :key="index"  v-bind:class="{ 'active':                                         currentPage == index}">
    		<a v-on:click="toPage(index)">{
       { index+1 }}</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>{
       {pageNum}}</i>页</a></li>
    	</ul>
    </div>

css:

.common-seo-page-box{
            padding-top: 19;
        }    
        .align-center{
            text-alogn: center;
        }
        .clearfix{
            z-index: 1;
        }
        li{
    	    list-style: none
    	}
    	.common-seo-page-box li:first-child>a {
    	   margin-left: 0px
    	}
    	.common-seo-page-box  .page-center{
    		float: left;
    		position: relative;
    		left: 50%;
    	}
    	.common-seo-page-box li{
    	    border: 1px solid #ddd;
    	    text-decoration: none;
    	    position: relative;
    	    float: left;
    		right: 50%;
    	    padding: 6px 12px;
    	    margin-left: -1px;
    	    line-height: 1.42857143;
    	    
    	    cursor: pointer
    	}
    	.common-seo-page-box li:hover{
    	    /* background-color: #eee; */
    	}
    	.common-seo-page-box li.banclick{
    	    cursor:not-allowed;
    	}
    	.common-seo-page-box .active{
    	    color: #fff;
    	    cursor: default;
    	    background-color: #337ab7;
    	    border-color: #337ab7;
    	}
    	.common-seo-page-box .active a{
    	    color: #fff;
    	    /* cursor: default;
    	    background-color: #337ab7;
    	    border-color: #337ab7; */
    	}
    	.common-seo-page-box i{
    	    font-style:normal;
    	    color: #d44950;
    	    margin: 0px 4px;
    	    font-size: 12px;
    	}

接下来就是重点: vue.js

export default{
    	name: 'ListPage',
    	data(){
    		return {	
    		    feasts: [],
                list_id: '',
    			pageSize: 2,
    			currentPage: 0
    		}
    	},
        mounted () {
    		this.$axios.get(this.HOST + 'api/list/' + this.list_id)
    		.then(res => {
    			this.detailData(res.data)
    		})
    		.catch(error => {
    			console.log(error)
    		})
    	},
        methods: {
    		getid(){
    			var id = this.$route.query.id
    			this.list_id = id
    		},
    		detailData(data){
    			// 过滤器
    			var labels = []
    				
    			for (var i=0; i<data.labelsData.length; i++) {
    				var labelsObj = {
    					id: data.labelsData[i].id,
    					title: data.labelsData[i].title,
    					master: data.labelsData[i].master_img
    				}
    				labels.push(labelsObj)
    			}
    			this.feasts = labels
    		},
    		nextPage: function(){
    			var vm = this;
    			if (vm.currentPage == vm.pageNum - 1) return;
    			vm.currentPage++;	 
    		},
    		prePage: function(){
    			var vm = this;
    			if (vm.currentPage == 0) return;
    			vm.currentPage--;
    				
    		},
    		toPage: function(page){
    			var vm = this;
    			vm.currentPage = page
    		}
    	},
    	computed:{
    		dataShow: function(){
    			let start = this.currentPage*this.pageSize;
    			let end = Math.min((this.currentPage+1)*this.pageSize, this.feasts.length)
    			return this.feasts.slice(start, end)
    		},
    		pageNum: function(){
    			return Math.ceil(this.feasts.length / this.pageSize) || 1 ;
    		},
    		
    	}

最后我们来一张效果图:

![20191112103809828.png][]

[20191112103809828.png]: https://img-blog.csdnimg.cn/20191112103809828.png