不知为什么图标区没有显示
来源: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
相似问题