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="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两行四列轮播图内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！