vue纯手写PC端分页

公共组件：page.vue

<template>
  <aside class="pager" v-if="len>1">
    <div class="pager_box">
      <span :class="{disabled:now<=1}" @click="getData(now-1)"><</span>
      <template v-if="len <= 6 || (len === 7 && now === 4)">
        <span v-for="(i, k) in len" :class="['pager_item', {active:i === now}]" @click="getData(i)" :key="k">{{ i }}</span>
      </template>
      <template v-else-if="now <= 4 && now < len - 3">
        <span v-for="(i, k) in (now + 2)" :class="['pager_item', {active:i === now}]" @click="getData(i)" :key="k" v-if="i < (now + 3)">{{ i }}</span>
        <span>...</span>
        <span class="pager_item" @click="getData(len)">{{len}}</span>
      </template>
      <template v-else-if="now > 4 && now >= (len - 3)">
        <span class="pager_item" @click="getData(1)">1</span>
        <span>...</span>
        <span v-for="(i, k) in len" :class="['pager_item', {active:i === now}]" @click="getData(i)" :key="k" v-if="i > (now - 3) && i < (now + 4)">{{ i }}</span>
      </template>
      <template v-else>
        <span class="pager_item" @click="getData(1)">1</span>
        <span>...</span>
        <span v-for="(i, k) in (now + 2)" :class="['pager_item', {active:i === now}]" @click="getData(i)" :key="k" v-if="i > (now - 3)">{{ i }}</span>
        <span>...</span>
        <span class="pager_item" @click="getData(1)">{{len}}</span>
      </template>
      <span :class="{disabled:now>=len}" @click="getData(now+1,1)">></span>
    </div>
  </aside>
</template>

<script>
  export default {
    name: 'pager',
    props: {
      len: {
        type: Number
      },
      now: {
        type: Number
      }
    },
    data () {
      return {
        rightSibling: 0,
        leftSibling: 0
      }
    },
    methods: {
      getData (p, type) {
        if (p <= 0 || p > this.len) return false
        this.$emit('getList', p)
        if (type) {
          if (this.now >= this.len - 2) return false
          this.leftSibling = p
          this.rightSibling = this.leftSibling + 1
        } else {
          if (this.now <= 4) return false
          this.rightSibling = p
          this.leftSibling = this.rightSibling - 1
        }
      }
    },
    mounted () {
      // console.log(this.now)
    }
  }
</script>

<style type="text/css" lang="scss">
  @import '~@/assets/css/style.scss';
  .pager{
    padding-top:20px;
    padding-bottom:50px;
    .pager_box{
      float: right;
      box-shadow: 5px 5px 5px #e0e6f3, -5px 5px 5px #e0e6f3;
      span{
        display: inline-block;
        padding: 0 15px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        color: #999;
        background: #fff;
        cursor: pointer;
      }
      span:hover, span.active{
        background: #327fff;
        color: #fff;
      }
      span.disabled{
        background: #f3eded;
        color: #c7c1c1;
      }
    }
  }
</style>

在主页面引入并且使用分页组件：

import Pager from '@/component/common/page'
data （）{
  return {
    len: 0,
    now: 1, // 当前页
  }
}

methods: {
    getList (n) {
      this.lists = []
      this.now = n
      this.$api.post('index/news_list', {limit: 6, page: this.now}).then(res => {
        this.lists = res.news_list
        this.show = !res.news_list.length
        if (this.now > 1) return false
        this.len = Math.ceil(res.total / 6)
      })
    },
}

<Pager :len="len" :now="now" @getList="getList"></Pager>

初始化，刚进页面的时候调用：

mounted () {
    this.getList(1)
}

效果如下：