Vue使用计算属性完成图标区域分页功能
再写vue作品的时候图标区是两页写了九个图标,最终显示到页面上的只有一页,第九个在第三行并且被隐藏了
template代码
只写一个swiper-slide实现分页滑动的功能
<template>
<div class="icons">
<!-- 引入swiper实现轮播 -->
<swiper>
<swiper-slide>
<div class='icon' v-for='item of iconList' :key='item.id'>
<div class='icon-img'>
<img class='icon-img-icons' :src='item.imgUrl'>
</div>
<p class='icon-desc'>{{ item.desc }}</p>
</div>
</swiper-slide>
</swiper>
</div>
</template>
data()部分代码:
使用return是因为:data必须是一个函数,而不能是一个对象,因为一个子组件,它不像根组件只会被调用一次,他可能在不同的地方也被调用了,它对应的数据应该是完整的一套数据,而不应该是共享一套,保证每一个数据都有独立的存储,这样就不会出现多个子组件之间互相影响的情况
data () {
return {
iconList: [{
id: '0001',
imgUrl: require('@/assets/iconsOne.png'),
desc: '景点门票'
}, {
id: '0002',
imgUrl: require('@/assets/iconsTwo.png'),
desc: '滑雪季'
}, {
id: '0003',
imgUrl: require('@/assets/iconsThree.png'),
desc: '泡温泉'
}, {
id: '0004',
imgUrl: require('@/assets/iconsFour.png'),
desc: '动植物园'
}, {
id: '0006',
imgUrl: require('@/assets/iconsSix.png'),
desc: '踏青赏花'
}, {
id: '0005',
imgUrl: require('@/assets/iconsFive.png'),
desc: '一日游'
}, {
id: '0007',
imgUrl: require('@/assets/iconsSeven.png'),
desc: '故宫'
}, {
id: '0008',
imgUrl: require('@/assets/iconsNine.png'),
desc: '溜娃儿'
}, {
id: '0009',
imgUrl: require('@/assets/iconsEight.png'),
desc: '自然风光'
}]
}
为什么要使用计算属性(computed)
计算属性是根据其它得一些属性计算出来,生成一组新的结果,它自带一个缓存得机制,语法还比较简单
在computed下定义一个pages这样的数据
由一个函数pages()返还回来的一个数据
pages () {
const pages = []
/*使用 arr.forEach(function(currentValue, index, arr) 对 data里的iconList数组对象 的每一项进行循环,
循环会接收到两个参数:currentValue是具体的循环项;index是循环项对应的下标
*/
this.iconList.forEach((item, index) => {
/**
* 调用Math.floor()方法向下取整假:
* 设是第三个数据,index对应的是2,那么page就等于0,凡是0-7的数据都为零,就让他们都展示在第一页上
* 如果是第九个数据,那么index对应的就是8,page就等于1,然后就让等于1的数据都展示在第二页上
* ps:相当于创造一个二维数组,每一维里是八个数据
*/
const page = Math.floor(index / 8)
/**
* page算出来做一个判断:
* 1.判断pages[page]存不存在(pages数组对应的下标里边 有数据就存在,如果没有就不存在)
* 如果不存在就赋予空数组一直在当前这个下标上添加数据,直到page取下一个数为止
* 例如:pages[0] 里边有数据就一直添加,一旦page改变为1,那就要再次赋予空数组继续在pages[1]里边添加数据
*/
if (!pages[page]) {
pages[page] = []
}
// 每一项得数据,添加在对应的pages[page]里
pages[page].push(item)
})
//最后返回 pages数组
return pages
}
}
写完pages函数后对应的template里对应要循环的数组也要更改
之前直接在swiper-slide 里的循环是iconslist ,但现在不是这样了,首先循环到底有多少个轮播页面,这个轮播页面由pages控制
<template>
<div class="icons">
<!-- 引入swiper实现轮播 -->
<swiper>
<!-- 循环到底有多少个轮播页面 页面由v-for控制-->
<swiper-slide v-for="(page, index) of pages" :key="index">
<!-- 这里循环的数据也不是iconList了 是page-->
<div class='icon' v-for='item of page' :key='item.id'>
<div class='icon-img'>
<img class='icon-img-icons' :src='item.imgUrl'>
</div>
<p class='icon-desc'>{{ item.desc }}</p>
</div>
</swiper-slide>
</swiper>
</div>
</template>
完成!根据数据项的不同 自动化的去构建页码 然后可以实现多页切换的轮播图的效果