swiper7-9.开启更好的性能 

 1 <template>
 2   <div class="swiper mySwiper">
 3     <div class="swiper-wrapper">
 4       <div class="swiper-slide">Slide 1</div>
 5       <div class="swiper-slide">Slide 2</div>
 6       <div class="swiper-slide">Slide 3</div>
 7       <div class="swiper-slide">Slide 4</div>
 8       <div class="swiper-slide">Slide 5</div>
 9       <div class="swiper-slide">Slide 6</div>
10       <div class="swiper-slide">Slide 7</div>
11       <div class="swiper-slide">Slide 8</div>
12       <div class="swiper-slide">Slide 9</div>
13     </div>
14     <div class="swiper-button-next"></div>
15     <div class="swiper-button-prev"></div>
16     <div class="swiper-pagination"></div>
17   </div>
18 </template>
19 <script>
20 import Swiper from "swiper/swiper-bundle.min.js";
21 import "swiper/swiper-bundle.min.css";
22 
23 export default {
24   components: {},
25   methods: {},
26   mounted() {
27     this.$nextTick(() => {
28       // 创建swiper对象
29       const swiper = new Swiper(".mySwiper", {
30         cssMode: true, // 开启这个会带来更好的性能，但是会导致不支持很多swiper的功能，例如在PC端无法使用鼠标滑动轮播图，但是在移动端可以使用手指滑动轮播图
31         navigation: {
32           nextEl: ".swiper-button-next",
33           prevEl: ".swiper-button-prev",
34         },
35         pagination: {
36           el: ".swiper-pagination",
37         },
38         mousewheel: false, // 开启鼠标滑动轮播图，但是因为cssMode的缘故导致PC端的无法使用；
39         keyboard: true, // 开启键盘方向键可以控制切换轮播图
40       });
41     });
42   },
43 };
44 </script>
45 
46 <style>
47 html,
48 body {
49   position: relative;
50   height: 100%;
51 }
52 
53 body {
54   background: #eee;
55   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
56   font-size: 14px;
57   color: #000;
58   margin: 0;
59   padding: 0;
60 }
61 
62 .swiper {
63   width: 100%;
64   height: 700px;
65 }
66 
67 .swiper-slide {
68   text-align: center;
69   font-size: 18px;
70   background: #fff;
71 
72   /* Center slide text vertically */
73   display: -webkit-box;
74   display: -ms-flexbox;
75   display: -webkit-flex;
76   display: flex;
77   -webkit-box-pack: center;
78   -ms-flex-pack: center;
79   -webkit-justify-content: center;
80   justify-content: center;
81   -webkit-box-align: center;
82   -ms-flex-align: center;
83   -webkit-align-items: center;
84   align-items: center;
85 }
86 
87 .swiper-slide img {
88   display: block;
89   width: 100%;
90   height: 100%;
91   object-fit: cover;
92 }
93 </style>

 

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