vue 分页显示

老规矩，先说下我实现的思路

• 我是用v-for遍历一个json数组，展示里面的数据
• 因为数据太多，页面切换时会卡顿，所以要分页
• 我这分页实现模式并不是用ajax，我是全部数据都已经获取到了，只是筛选一下要显示的数据

---

先看下没有分页的代码

<template>
  <div class="goodFriends scroll">
    <div v-for="(friend, index) in friendsList" :key="index">
   	 ...
    </div>
  </div>
</template>

再看下收到分页的代码，如显示第一页，我是一页展示100个数据

<template>
  <div class="goodFriends scroll">
  
    <div v-for="(friend, index) in friendsList" 
    :key="index"
    v-if="index<100 && index>=0"
    >
   	 ...
    </div>
  </div>
</template>

然后我们把上面的改成动态的，根据父组件传参，显示页面

<template>
  <div class="goodFriends scroll">
  
    <div v-for="(friend, index) in friendsList" 
    :key="index"
    v-if="index<maxNumber && index>=minNumber"
    >
   	 ...
    </div>
  </div>
</template>

js 我是通过props传参（也可以vuex传参）

 props: {
    currentPage: {
      type: Number,
      default: 1
    }
  },
computed: {
    ...mapGetters({
      friendsList: 'friendsList'
    }),
    minNumber () {
      let min = (this.$props.currentPage - 1) * 100
      return min
    },
    maxNumber () {
      let max = (this.$props.currentPage) * 100
      return max
    }
  }
 }

父组件传参给上面的组件

核心代码：

  <v-goodFriends :currentPage="currentPage"></v-goodFriends>
   <!-- 分页的按钮 -->
  <div class="page">
     <i class="fa fa-angle-left fa-2x" aria-hidden="true" @click="lessPage"></i>
     <span>{{currentPage}}/{{pageMax}}</span>
     <i class="fa fa-angle-right fa-2x" aria-hidden="true" @click="addPage"></i>
  </div>

data () {
    return {
      currentPage: 1
    }
  },
computed: {
  ...mapGetters({
     friendsList: 'friendsList'
   }),
   pageMax () {
     let i = 0
     for (const key in this.friendsList) {
       if (this.friendsList.hasOwnProperty(key)) {
         i = key
       }
     }
     i++
     return Math.ceil(i / 100)
   }
},
 methods: {
   lessPage () {
     console.log('less page')
     if (this.currentPage === 1) {
       this.currentPage = 1
     } else {
       this.currentPage -= 1
     }
   },
   addPage () {
     console.log('add page')
     console.log(this.currentPage)
     console.log(this.pageMax)
     if (this.currentPage < this.pageMax) {
       this.currentPage += 1
     } else {
       this.currentPage = this.pageMax
     }
   }
}

---

图标用的是font awesome
父组件传参时记得v:bind参数，这样参数根据点击加减，并传到子组件