swiper7- 13.横向滚动中内嵌竖向滚动 

 1 <template>
 2   <!-- Swiper -->
 3   <div class="swiper mySwiper swiper-h">
 4     <div class="swiper-wrapper">
 5       <div class="swiper-slide">Horizontal Slide 1</div>
 6       <div class="swiper-slide">
 7         <div class="swiper mySwiper2 swiper-v">
 8           <div class="swiper-wrapper">
 9             <div class="swiper-slide">Vertical Slide 1</div>
10             <div class="swiper-slide">Vertical Slide 2</div>
11             <div class="swiper-slide">Vertical Slide 3</div>
12             <div class="swiper-slide">Vertical Slide 4</div>
13             <div class="swiper-slide">Vertical Slide 5</div>
14           </div>
15           <div class="swiper-pagination"></div>
16         </div>
17       </div>
18       <div class="swiper-slide">Horizontal Slide 3</div>
19       <div class="swiper-slide">Horizontal Slide 4</div>
20     </div>
21     <div class="swiper-pagination"></div>
22   </div>
23   <!-- 横向滚动中内嵌一个竖向滚动 -->
24 </template>
25 <script>
26 import Swiper from "swiper/swiper-bundle.min.js";
27 import "swiper/swiper-bundle.min.css";
28 export default {
29   components: {},
30   methods: {},
31   mounted() {
32     this.$nextTick(() => {
33       // 创建swiper1对象
34       var swiper = new Swiper(".mySwiper", {
35         spaceBetween: 50, // 在slide之间设置距离（单位px）。
36         pagination: {
37           // 使用分页器导航。分页器可使用小圆点样式（默认）、分式样式或进度条样式。
38           el: ".swiper-pagination",
39           clickable: true, // 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
40         },
41       });
42 
43       // 创建swiper2对象
44       var swiper2 = new Swiper(".mySwiper2", {
45         direction: "vertical", // Swiper的滑动方向，可设置为水平方向切换(horizontal)或垂直方向切换(vertical)
46         spaceBetween: 50,
47         pagination: {
48           el: ".swiper-pagination",
49           clickable: true,
50         },
51       });
52     });
53   },
54 };
55 </script>
56 
57 <style lang="scss" scoped>
58 .swiper {
59   width: 100%;
60   height: 500px;
61 }
62 
63 .swiper-slide {
64   text-align: center;
65   font-size: 18px;
66   background: #fff;
67 
68   /* Center slide text vertically */
69   display: -webkit-box;
70   display: -ms-flexbox;
71   display: -webkit-flex;
72   display: flex;
73   -webkit-box-pack: center;
74   -ms-flex-pack: center;
75   -webkit-justify-content: center;
76   justify-content: center;
77   -webkit-box-align: center;
78   -ms-flex-align: center;
79   -webkit-align-items: center;
80   align-items: center;
81 }
82 
83 .swiper-slide img {
84   display: block;
85   width: 100%;
86   height: 100%;
87   object-fit: cover;
88 }
89 
90 .swiper-v {
91   background: #eee;
92 }
93 </style>

 

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