图标过多的时候,可以实现图标左右轮播,可以左右滑动
-
<template>
-
<div class="icons">
-
<swiper :options="swiperOption">
-
<swiper-slide v-for="(page, index) of pages" :key="index">
-
<div class="icon" v-for="item of page" :key="item.id">
-
<div class="icon-img">
-
<img class="icon-img-content" :src="item.imgUrl"/>
-
<p class="icon-desc">{{item.desc}}</p>
-
</div>
-
</div>
-
</swiper-slide>
-
</swiper>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:"HomeIcons",
-
props:{
-
list:Array
-
},
-
data(){
-
return{
-
swiperOption: {
-
autoplay: false
-
}
-
}
-
},
-
computed:{
-
pages (){
-
const pages=[]
-
this.list.forEach((item,index)=>{
-
const page=Math.floor(index/8)
-
if (!pages[page]) {
-
pages[page] = []
-
}
-
pages[page].push(item)
-
//Math.floor 取一个最接近他的整数
-
//pages是个数组
-
//pages[0]是个对象数组,里边存放着8个对象,前8个,page[1]也是个对象数组
-
})
-
console.log(pages);
-
return pages
-
}
-
}
-
}
-
</script>
-
-
<style lang="stylus" scoped>
-
@import '~styles/varibles.styl'
-
@import '~styles/mixins.styl'
-
.icons >>> .swiper-container
-
width:100%
-
height:0
-
overflow:hidden
-
padding-bottom:50%
-
.icons
-
margin-top: .1rem
-
.icon
-
position:relative
-
overflow:hidden
-
float:left
-
width:25%
-
height:0
-
padding-bottom:25%
-
.icon-img
-
position:absolute
-
top:0
-
left:0
-
right:0
-
bottom:.44rem
-
box-sizing:border-box
-
padding:.1rem
-
.icon-img-content
-
display:block
-
height:100%
-
margin:0 auto
-
.icon-desc
-
position: absolute
-
left: 0
-
right: 0
-
height: .44rem
-
line-height: .44rem
-
text-align: center
-
color: $darkTextColor
-
ellipsis()
-
</style>