案例效果
基本样式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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; } |
所需文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<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) 用来将这些图片文字 以八个为单位分别拆开 从而实现最重要的效果
循环遍历
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
先遍历以八个为单位的数组 然后在遍历里面的内容
