vue+原生js手写分页

本文只是一个简单地DEMO，所以不会用vue全家桶去构建一个工程。

一、引入vue.js

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

二、分页css（包含一些简单地动画效果）

.pagewrap {
    padding: 25px 0;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    color: #666;
    text-align: center;
    font-size: 14px;
}

.pagewrap i {
    height: 34px;
    padding: 0;
    border: 1px solid #ccc;
    line-height: 34px;
    border-radius: 3px;
    width: 34px;
    display: inline-block;
    cursor: pointer;
    margin: 0 4px;
    vertical-align: middle;
}

.pagewrap i.button {
    width: 68px;
}

.pagewrap i:hover {
    border-color: #fdb800;
    color: #fdb800;
    animation: buttonshake .4s ease-out forwards;
}

.pagewrap i.current:hover, i.current, i.button:hover {
    border-color: #fdb800;
    color: #fdb800;
    animation: none;
}

.pagewrap i.disabled, i.disabled:hover {
    background: #EFEFEF;
    border-color: #EFEFEF;
    color: #AAA;
    cursor: text;
    animation: none;
}

.pagewrap i.ellipsis, i.ellipsis:hover {
    background: none;
    border-color: #FFF;
    color: #AAA;
    cursor: text;
    animation: none;
}

@-webkit-keyframes buttonshake {
    25% {
        -webkit-transform: rotate(45deg);
    }
    75% {
        -webkit-transform: rotate(-45deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes buttonshake {
    25% {
        transform: rotate(45deg);
    }
    75% {
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

三、分页html（for循环生成分页按钮和样式条件）

<div id="app">
    <div class="pagewrap">
        <i v-for="button in page.buttons"
           :class="{button: button.button, disabled: button.disabled, current: button.current, ellipsis: button.ellipsis}"
           @click="button.current || button.ellipsis || button.disabled || loadList(button.number);">
            {{button.title}}
        </i>
    </div>
</div>

四、分页js（可以尝试传入不同参数打印buttons）

var app = new Vue({
   el: '#app',
   data: {
       page: {}
   },
   methods: {
       pagination(current, total) {
           var buttons = [];
           if (total) {
               var last = {
                   title: '上一页',
                   disabled: !(current > 0),
                   button: 1,
                   number: current - 1,
                   log: '{"evtname":"上一页","evtvalue":"prev"}'
               };
               var next = {
                   title: '下一页',
                   disabled: !(current < total - 1),
                   button: 2,
                   number: current + 1,
                   log: '{"evtname":"下一页","evtvalue":"next"}'
               };
               buttons.push(last);
               var i = 0;
               if (total <= 10) {
                   i = 0;
                   for (; i < total; i++) {
                       buttons.push({
                           title: i + 1,
                           number: i,
                           current: current == i
                       });
                   }
               } else if (current < 5) {
                   i = 0;
                   for (; i < 8; i++) {
                       buttons.push({
                           title: i + 1,
                           number: i,
                           current: current == i
                       });
                   }
                   buttons.push({
                       title: '…',
                       ellipsis: 1
                   });
                   buttons.push({
                       title: total,
                       number: total - 1
                   });
               } else if (total - current - 1 < 5) {
                   buttons.push({
                       title: '1',
                       number: 0
                   });
                   buttons.push({
                       title: '…',
                       ellipsis: 1
                   });
                   i = total - 8;
                   for (; i < total; i++) {
                       buttons.push({
                           title: i + 1,
                           number: i,
                           current: current == i
                       });
                   }
               } else {
                   buttons.push({
                       title: '1',
                       number: 0
                   });
                   buttons.push({
                       title: '…',
                       ellipsis: 1
                   });
                   i = current - 2;
                   for (; i < current + 4; i++) {
                       buttons.push({
                           title: i + 1,
                           number: i,
                           current: current == i
                       });
                   }
                   buttons.push({
                       title: '…',
                       ellipsis: 1
                   });
                   buttons.push({
                       title: total,
                       number: total - 1
                   });
               }
               buttons.push(next);
           }
           console.log(buttons);
           return buttons;
       }
   }，
   created() {
       // 当前第5页，一共21页
       this.page.buttons = this.pagination(5, 21);
    }
})

效果图（到这里简单的样子已经出来了）

pagination.png

五、配合后台数据，引入axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

data: {
    page: {
        number: 0,
        size: 10
    }
},
// methods里添加方法
methods: {
    loadList() {
        // 后端给的url地址,传参一般是当前页数和展示条数
        axios.post(URL, {
            page: this.page.number || 0,
            size: this.page.size
        })
        .then(data => {
            console.log("加载列表成功");
            // 这里的传值具体看后端返回数据
            this.page.buttons = this.pagination(data.current, data.total);
        })
        .catch(data => {
             console.log("加载列表失败");
        });
    }
}，
// 调用方法
created() {
     // this.page.buttons = this.pagination(5, 21);
     this.loadList();
}