Vue仿旅游网站-图标轮播组件实现

图标过多的时候，可以实现图标左右轮播，可以左右滑动

1. <template>
2.     <div class="icons">
3.       <swiper :options="swiperOption">
4.       <swiper-slide v-for="(page, index) of pages" :key="index">
5.         <div class="icon" v-for="item of page" :key="item.id">
6.            <div class="icon-img">
7.                <img class="icon-img-content" :src="item.imgUrl"/>
8.                <p class="icon-desc">{{item.desc}}</p>
9.            </div>
10.         </div>
11.        </swiper-slide>
12.     </swiper>
13.     </div>
14. </template>
15.  
16. <script>
17.     export default {
18.         name:"HomeIcons",
19.         props:{
20.           list:Array
21.         },
22.         data(){
23.           return{
24.           swiperOption: {
25.             autoplay: false
26.           }
27.         }
28.     },
29.      computed:{
30.        pages (){
31.          const pages=[]
32.            this.list.forEach((item,index)=>{
33.            const page=Math.floor(index/8)
34.             if (!pages[page]) {
35.               pages[page] = []
36.            }
37.            pages[page].push(item)
38.            //Math.floor 取一个最接近他的整数
39.            //pages是个数组
40.            //pages[0]是个对象数组，里边存放着8个对象，前8个，page[1]也是个对象数组
41.        })
42.        console.log(pages);
43.        return pages
44.      }
45.    }
46.  }
47. </script>
48.  
49. <style lang="stylus" scoped>
50. @import '~styles/varibles.styl'
51.  @import '~styles/mixins.styl'
52.    .icons >>> .swiper-container
53.       width:100%
54.       height:0
55.       overflow:hidden
56.       padding-bottom:50%
57.     .icons
58.       margin-top: .1rem
59.       .icon
60.          position:relative
61.          overflow:hidden
62.          float:left
63.          width:25%
64.          height:0
65.          padding-bottom:25%
66.          .icon-img
67.            position:absolute
68.            top:0
69.            left:0
70.            right:0
71.            bottom:.44rem
72.            box-sizing:border-box
73.            padding:.1rem
74.            .icon-img-content
75.               display:block
76.               height:100%
77.               margin:0 auto
78.            .icon-desc
79.               position: absolute
80.               left: 0
81.               right: 0
82.               height: .44rem
83.               line-height: .44rem
84.               text-align: center
85.               color: $darkTextColor
86.               ellipsis()
87. </style>