swiper-4.添加滚动条 

 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-scrollbar"></div>
15   </div>
16 </template>
17 <script>
18 import Swiper from "swiper/swiper-bundle.min.js";
19 import "swiper/swiper-bundle.min.css";
20 
21 export default {
22   components: {},
23   methods: {},
24   mounted() {
25     this.$nextTick(() => {
26       // 创建swiper对象
27       const swiper = new Swiper(".mySwiper", {
28         // 增加滚动条
29         scrollbar: {
30           el: ".swiper-scrollbar",
31           hide: true, // 这个是在不滚动的时候，隐藏滚动条
32         },
33       });
34     });
35   },
36 };
37 </script>
38 
39 <style lang="scss" scoped>
40 .swiper {
41   width: 100%;
42   height: 700px;
43 }
44 
45 .swiper-slide {
46   text-align: center;
47   font-size: 18px;
48   background: #fff;
49 
50   /* Center slide text vertically */
51   display: -webkit-box;
52   display: -ms-flexbox;
53   display: -webkit-flex;
54   display: flex;
55   -webkit-box-pack: center;
56   -ms-flex-pack: center;
57   -webkit-justify-content: center;
58   justify-content: center;
59   -webkit-box-align: center;
60   -ms-flex-align: center;
61   -webkit-align-items: center;
62   align-items: center;
63 }
64 
65 .swiper-slide img {
66   display: block;
67   width: 100%;
68   height: 100%;
69   /* object-fit 让图片适应容器，但是设置宽高百分百，还有必要设置这个属性吗  */
70   object-fit: cover;
71 }
72 </style>

 

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