不知为什么图标区没有显示

Question

照着老师的写，不知为什么效果就变成这样了，然后滑动没反应，他自己会定时滑动

<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>

Answer 1

Dell 2018-07-05 09:59:55

你这里只有一个swiper啊，我的代码里肯定有两个，一个是轮播，一个是icons

• 提问者 不能说的 #1

  老师帮我看看睇什么哪里出了问题

Answer 2

Dell 2018-07-05 09:57:47

然后有什么问题呢？说明一下

• 提问者 不能说的 #1

  效果图我编辑过了在上面，检查了我的代码和视频中的代码，没发现什么不同，麻烦老师帮我看看是什么原因

• Dell 回复 提问者 不能说的 #2

  样式的问题你得用chrome的工具调试，这个我觉得你用beyond compare对比下咱们两个人的代码，就可以看到问题了