swiper7- 12. 网格布局 

 1 <template>
 2   <!-- Swiper -->
 3   <div class="swiper mySwiper">
 4     <div class="swiper-wrapper">
 5       <div class="swiper-slide">Slide 1</div>
 6       <div class="swiper-slide">Slide 2</div>
 7       <div class="swiper-slide">Slide 3</div>
 8       <div class="swiper-slide">Slide 4</div>
 9       <div class="swiper-slide">Slide 5</div>
10       <div class="swiper-slide">Slide 6</div>
11       <div class="swiper-slide">Slide 7</div>
12       <div class="swiper-slide">Slide 8</div>
13       <div class="swiper-slide">Slide 9</div>
14     </div>
15     <div class="swiper-pagination"></div>
16     <!-- 网格布局 -->
17   </div>
18 </template>
19 <script>
20 import Swiper from "swiper/swiper-bundle.min.js";
21 import "swiper/swiper-bundle.min.css";
22 export default {
23   components: {},
24   methods: {},
25   mounted() {
26     this.$nextTick(() => {
27       // 创建swiper对象
28       const swiper = new Swiper(".mySwiper", {
29         slidesPerView: 3, // 设置slider容器能够同时显示的slides数量
30         grid: {
31           // 设置网格组件的参数来启用网格功能。网格就是同一屏内Slide的多行多列布局。
32           rows: 2, // 设置网格中Slide的行数。
33         },
34         spaceBetween: 30, // 在slide之间设置距离（单位px）。
35         pagination: {
36           el: ".swiper-pagination",
37           clickable: true,
38         },
39       });
40     });
41   },
42 };
43 </script>
44 
45 <style lang="scss" scoped>
46 .swiper {
47   width: 100%;
48   height: 500px;
49   margin-left: auto;
50   margin-right: auto;
51 }
52 
53 .swiper-slide {
54   text-align: center;
55   font-size: 18px;
56   background: #fff;
57   height: calc((100% - 30px) / 2);
58 
59   /* Center slide text vertically */
60   display: -webkit-box;
61   display: -ms-flexbox;
62   display: -webkit-flex;
63   display: flex;
64   -webkit-box-pack: center;
65   -ms-flex-pack: center;
66   -webkit-justify-content: center;
67   justify-content: center;
68   -webkit-box-align: center;
69   -ms-flex-align: center;
70   -webkit-align-items: center;
71   align-items: center;
72 }
73 </style>

 

posted @ 2021-12-12 17:48  sky-su  阅读(906)  评论(0)    收藏  举报