swiper7-32. 双击图片放大

 1 <template>
 2   <div
 3     style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
 4     class="swiper mySwiper"
 5   >
 6     <div class="swiper-wrapper">
 7       <div class="swiper-slide">
 8         <div class="swiper-zoom-container">
 9           <img src="images/nature-1.jpg" />
10         </div>
11       </div>
12       <div class="swiper-slide">
13         <div class="swiper-zoom-container">
14           <img src="images/nature-2.jpg" />
15         </div>
16       </div>
17       <div class="swiper-slide">
18         <div class="swiper-zoom-container">
19           <img src="images/nature-3.jpg" />
20         </div>
21       </div>
22       <div class="swiper-slide">
23         <div class="swiper-zoom-container">
24           <img src="images/nature-4.jpg" />
25         </div>
26       </div>
27       <div class="swiper-slide">
28         <div class="swiper-zoom-container">
29           <img src="images/nature-5.jpg" />
30         </div>
31       </div>
32       <div class="swiper-slide">
33         <div class="swiper-zoom-container">
34           <img src="images/nature-6.jpg" />
35         </div>
36       </div>
37       <div class="swiper-slide">
38         <div class="swiper-zoom-container">
39           <img src="images/nature-7.jpg" />
40         </div>
41       </div>
42       <div class="swiper-slide">
43         <div class="swiper-zoom-container">
44           <img src="images/nature-8.jpg" />
45         </div>
46       </div>
47       <div class="swiper-slide">
48         <div class="swiper-zoom-container">
49           <img src="images/nature-9.jpg" />
50         </div>
51       </div>
52     </div>
53     <div class="swiper-button-next"></div>
54     <div class="swiper-button-prev"></div>
55     <div class="swiper-pagination"></div>
56   </div>
57   <!-- 双击图片放大 -->
58 </template>
59 <script>
60 import Swiper from "swiper/swiper-bundle.min.js";
61 import "swiper/swiper-bundle.min.css";
62 
63 export default {
64   components: {},
65   methods: {},
66   mounted() {
67     this.$nextTick(() => {
68       // 创建swiper对象
69       var swiper = new Swiper(".mySwiper", {
70         // zoom 开启焦距功能：双击slide会放大/缩小，并且在手机端可双指触摸缩放。可设置缩放选项或设为true使用默认值。
71         zoom: true,
72         navigation: {
73           nextEl: ".swiper-button-next",
74           prevEl: ".swiper-button-prev",
75         },
76         pagination: {
77           el: ".swiper-pagination",
78           clickable: true,
79         },
80       });
81     });
82   },
83 };
84 </script>
85 
86 <style lang="scss" scoped>
87 .swiper {
88   width: 100%;
89   height: 500px;
90 }
91 
92 .swiper-slide {
93   overflow: hidden;
94 }
95 </style>

标签：pagination,缩放,32,zoom,swiper7,true,双击,swiper
来源： https://www.cnblogs.com/jyjy28/p/15686117.html