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

来源:7-6 Vue项目首页 - 图标区域逻辑实现

不能说的

2018-07-04

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

//img.mukewang.com/szimg/5b3f2b940001cfee03090548.jpg

//img.mukewang.com/szimg/5b3f2c020001d9c412540588.jpg

<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

0
1
不能说的
老师帮我看看睇什么哪里出了问题
2018-07-07
共1条回复

Dell

2018-07-05

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

0
2
Dell
回复
不能说的
样式的问题你得用chrome的工具调试,这个我觉得你用beyond compare对比下咱们两个人的代码,就可以看到问题了
2018-07-07
共2条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代,企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程