本篇内容主要讲解“怎么用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>先遍历以八个为单位的数组 然后在遍历里面的内容
到此，相信大家对“怎么用Swiper实现两行四列轮播图效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.zhuxianfei.com/jishu/js/59369.html
