案例效果

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="https://www.jb51.net/article/page.imgUrl">
<p>{{page.text}}</p>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>

先遍历以八个为单位的数组 然后在遍历里面的内容

总结

到此这篇关于Swiper如何实现两行四列轮播图效果的文章就介绍到这了,更多相关Swiper两行四列轮播图内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。