老规矩,先说下我实现的思路
- 我是用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参数,这样参数根据点击加减,并传到子组件