vue 手动实现无刷新分页

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010505805/article/details/79701031

   Html页面代码

<div class="record-detial-page" style="margin-left: 12px;">
                    <ul class="pagination">
                        <li class="totle-page-record">共<span> @{{message_number}} </span>条记录</li>
                        <li class="first-page"  v-on:click="page_change(-2)">首页</li>
                        <li class="last-page" v-on:click="page_change(-1)">上一页</li>
                        <li class="page-detail">
                            <ul>
                                <li v-for="(item ,index) in page_list" v-on:click="get_page(item.page)"
                                    v-if="(item.page == page )" class="click-page-detail">@{{item.page}}
                                </li>
                                <li v-else v-on:click="get_page(item.page)" >@{{item.page}}</li>
                            </ul>
                        </li>
                        <li class="next-page" v-on:click="page_change(1)">下一页</li>
                        <li class="end-page" v-on:click="page_change(2)">末页</li>
                        <li class="totle-page">共<span> @{{totle_page}} </span>页</li>
                    </ul>
                </div>  

js代码:

<script>
        new Vue({
            el: '#app',
            data: {
                message_list: [],
                page: 1,
                message_statistics: [],
                message_number: 0,
                page_list: [],
                totle_page: 0,
                shop_name: "",
                mobile: "",
                message_type: 0,
                buyers_nikename: "",
                orderid: '',
                start_time: '',
                end_time: '',
                num: 1,
                order_start_time: '',
                order_end_time: '',
            },
            created: function () {
                // this.get_shop_expediting();
                //this.post_seach_data();
            },
            methods: {
                page_change: function (status) {
                    if (status === 1) {
                        //进行下一页
                        if(this.page !==this.page_list[this.page_list.length - 1].page){
                            this.page = this.page+1 ;
                            this.get_page( this.page );
                            return false ;
                        }
                        this.get_page(this.page_list[this.page_list.length - 1].page + 1);
                        for (let i = 0; i < 10; i++) {
                            this.page_list[i].page = this.page_list[i].page + 10
                        }
                        this.num++;
                    } else if (status === -1  ) {
                        //进行下一页
                        if(this.page !==this.page_list[0].page){
                            this.page = this.page-1 ;
                            this.get_page( this.page );
                            return false ;
                        }
                        if(this.num !== 1){
                            this.get_page(this.page_list[0].page - 10);
                            for (let i = 0; i < 10; i++) {
                                this.page_list[i].page = this.page_list[i].page - 10
                            }
                            this.num--;
                        }
                    } else if (status === 2) {
                        console.log('=====')
                        console.log(this.totle_page)
                        this.get_page(this.totle_page); //展示末页数据
                        var last_page ;
                        if(this.totle_page % 10===0){
                             last_page = parseInt(this.totle_page / 10)-1
                        }else{
                             last_page = parseInt(this.totle_page / 10)
                        }
                        let last_first_page =last_page * 10 ;
                        for (let i = last_first_page ; i < this.totle_page; i++) {
                            this.page_list[i-last_first_page].page = i;
                        }
                        console.log(this.page_list);
                    }else if (status === -2) {
                        this.mobile='',
                        this.start_time='',
                        this.buyers_nikename='',
                        this.end_time='',
                        this.orderid='',
                        this.page=1,
                        this.post_seach_data();
                    }
                }
    </script>