这篇文章主要讲解了“Swiper怎么实现两行四列轮播图效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Swiper怎么实现两行四列轮播图效果”吧！
案例效果
基本样式
.icons{
width:100%;
overflow: hidden;
}
.icons-item{
width: 25%;
height: 0;
padding-bottom: 25%;
float: left;
}
.icons-item img{
width: 1.1rem;
height: 1.1rem;
display: block;
margin: 0 auto;
padding-top: .2rem;
}
.icons-item p{
margin-top: .1rem;
font-size: .28rem;
text-align: center;
color: #212121;
}所需文件
<script type="text/javascript">
export default {
data(){
return {
swiperOption:{},
iconsList:[
{
id:"01",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"酒店"
},
{
id:"02",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/flight.png",
text:"机票"
},
{
id:"03",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/train.png",
text:"火车票"
},
{
id:"04",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/package.png",
text:"度假"
}
,{
id:"05",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
,{
id:"06",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
,{
id:"07",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
,{
id:"08",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
,{
id:"09",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
,{
id:"10",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
],
swiperOption:{
// 设置分页器
pagination: {
el: '.swiper-pagination',
}
}
}
},
computed:{
page(){
let pages = [];
this.iconsList.forEach((item,index)=>{
let idx = Math.floor(index/8)
if(!pages[idx]) pages[idx] =[];
pages[idx].push(item)
})
return pages
}
}
}
</script>需要注意的是 let idx = Math.floor(index/8) if(!pages[idx]) pages[idx] =[]; pages[idx].push(item) 用来将这些图片文字 以八个为单位分别拆开 从而实现最重要的效果
循环遍历
<div class="icons">
<swiper ref="mySwiper" :options="swiperOption">
<swiper-slide v-for='item in page' :key='item.id'>
<div v-for="page in item" :key="page.id" class="icons-item">
<img :src="page.imgUrl">
<p>{{page.text}}</p>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>先遍历以八个为单位的数组 然后在遍历里面的内容