不知为什么图标区没有显示
来源:7-6 Vue项目首页 - 图标区域逻辑实现
不能说的
2018-07-04
照着老师的写,不知为什么效果就变成这样了,然后滑动没反应,他自己会定时滑动


<template>
<div class="icons">
<swiper>
<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'>
</div>
<p class="icon-desc">{{item.desc}}</p>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
export default{
name:'HomeIcons',
data () {
return {
iconList:[{
id:'0001',
imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
desc:'景点门票'
},{
id:'0002',
imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
desc:'必备榜单'
},{
id:'0003',
imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
desc:'必备榜单'
},{
id:'0004',
imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
desc:'必备榜单'
},{
id:'0005',
imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
desc:'必备榜单'
},{
id:'0006',
imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
desc:'必备榜单'
},{
id:'0007',
imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
desc:'必备榜单'
},{
id:'0008',
imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
desc:'必备榜单'
},{
id:'0009',
imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
desc:'必备榜单'
}]
}
},
computed:{
pages () {
const pages = []
this.iconList.forEach((item,index)=>{
const page = Math.floor(index/8)
if(!pages[page]){
pages[page] = []
}
pages[page].push(item)
})
return pages
}
}
}
</script>
<style scoped>
@import '~styles/varibles.styl'
.icons >>> .swiper-container
overflow:hidden
height:0
padding-bottom:50%
.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
margin:0 auto
height:100%
.icon-desc
position:absolute
left:0
right:0
bottom:0
height:.44rem
line-height:.44rem
text-align:center
color:$darkTextColor
</style>写回答
2回答
-
Dell
2018-07-05
你这里只有一个swiper啊,我的代码里肯定有两个,一个是轮播,一个是icons
012018-07-07 -
Dell
2018-07-05
然后有什么问题呢?说明一下
022018-07-07
相似问题