swiper7- 12. 网格布局

2021-12-12 18:03:25 阅读：292 来源： 互联网

标签：12 center align 网格 webkit Slide swiper7 swiper

 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>

标签：12,center,align,网格,webkit,Slide,swiper7,swiper
来源： https://www.cnblogs.com/jyjy28/p/15679972.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

swiper7- 12. 网格布局