banner图部分不会自动轮埠，icon部分会自动轮播，我想让轮播图自动轮播，icon不自动轮播。。。
来源：7-6 Vue项目首页 - 图标区域逻辑实现
伪装的很酷
2019-03-12
{{item.desc}}
2回答
-
new Swiper的时候，分别配置不同的参数就可以了
012019-04-02 -
伪装的很酷
提问者
2019-03-12
<!--icon部分代码-->
<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"
alt
>
</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/1803/95/8246f27355943202.png',
desc: '游乐场'
}, {
id: '0003',
imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.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/1803/ab/6f7d6e44963c9302.png',
desc: '泡温泉'
}, {
id: '0006',
imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/96/c70f1e85ae4a4f02.png',
desc: '自然风光'
}, {
id: '0007',
imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png',
desc: '亲子游'
}, {
id: '0008',
imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png',
desc: '婉转长隆'
}, {
id: '0009',
imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/87/20656da0ac042002.png',
desc: '玻璃栈道'
}, {
id: '0010',
imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/8c/47630407f70e8302.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 lang="stylus" scoped>
@import '~styles/varibles.styl';
.icons >>> .swiper-container
height: 0
padding-bottom: 50%
.icons
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: 0.44rem
box-sizing: border-box
paddomg: 1rems
.icon-img-content
display: block
margin: 0 auto
height: 100%
.icon-desc
position: absolute
left: 0
right: 0
bottom: 0
height: 0.44rem
line-height: 0.44rem
text-align: center
color: $datkTextColor
</style>
<!--swiper部分-->
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" alt />
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
data () {
return {
swiperOption: {
pagination: '.swiper-pagination',
loop: true
},
swiperList: [{
id: '0001',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20192/9f73976e40c4ef845cabe0efc0269ebb.jpg_750x200_aab92b7a.jpg'
}, {
id: '0002',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/0a8f7c789d0e62966e2485d33bf7ebd3.jpg_750x200_b455610d.jpg'
}, {
id: '0003',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20192/2e090c7af936930c119a28c2f62717f2.jpg_750x200_9fce1256.jpg'
}, {
id: '0004',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/700528b360c39d630dda13930a92a1a6.jpg_750x200_80f6150c.jpg'
}]
}
}
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background: #fff !important
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 26.66%
.swiper-img
width: 100%
</style>
022019-09-25
相似问题