标签：... return debugger 33 params swiper7 console swiper log
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 class="swiper-slide">Slide 10</div>
14 </div>
15 <!-- Add Pagination -->
16 <div class="swiper-pagination"></div>
17 <!-- Add Navigation -->
18 <div class="swiper-button-prev"></div>
19 <div class="swiper-button-next"></div>
20 <!-- 添加函数开启监听轮播图的各种事件(点击，滑动...) -->
21 </div>
22 </template>
23 <script>
24 import Swiper from "swiper/swiper-bundle.min.js";
25 import "swiper/swiper-bundle.min.css";
26
27 export default {
28 components: {},
29 methods: {
30 myPlugin({ swiper, extendParams, on }) {
31 extendParams({
32 debugger: false,
33 });
34
35 on("init", () => {
36 if (!swiper.params.debugger) return;
37 console.log("init");
38 });
39 on("click", (swiper, e) => {
40 if (!swiper.params.debugger) return;
41 console.log("click");
42 });
43 on("tap", (swiper, e) => {
44 if (!swiper.params.debugger) return;
45 console.log("tap");
46 });
47 on("doubleTap", (swiper, e) => {
48 if (!swiper.params.debugger) return;
49 console.log("doubleTap");
50 });
51 on("sliderMove", (swiper, e) => {
52 if (!swiper.params.debugger) return;
53 console.log("sliderMove");
54 });
55 on("slideChange", () => {
56 if (!swiper.params.debugger) return;
57 console.log(
58 "slideChange",
59 swiper.previousIndex,
60 "->",
61 swiper.activeIndex
62 );
63 });
64 on("slideChangeTransitionStart", () => {
65 if (!swiper.params.debugger) return;
66 console.log("slideChangeTransitionStart");
67 });
68 on("slideChangeTransitionEnd", () => {
69 if (!swiper.params.debugger) return;
70 console.log("slideChangeTransitionEnd");
71 });
72 on("transitionStart", () => {
73 if (!swiper.params.debugger) return;
74 console.log("transitionStart");
75 });
76 on("transitionEnd", () => {
77 if (!swiper.params.debugger) return;
78 console.log("transitionEnd");
79 });
80 on("fromEdge", () => {
81 if (!swiper.params.debugger) return;
82 console.log("fromEdge");
83 });
84 on("reachBeginning", () => {
85 if (!swiper.params.debugger) return;
86 console.log("reachBeginning");
87 });
88 on("reachEnd", () => {
89 if (!swiper.params.debugger) return;
90 console.log("reachEnd");
91 });
92 },
93 },
94 mounted() {
95 this.$nextTick(() => {
96 // 创建swiper对象
97 var swiper = new Swiper(".mySwiper", {
98 modules: [this.myPlugin],
99 pagination: {
100 el: ".swiper-pagination",
101 clickable: true,
102 },
103 navigation: {
104 nextEl: ".swiper-button-next",
105 prevEl: ".swiper-button-prev",
106 },
107 // Enable debugger
108 debugger: true,
109 });
110 });
111 },
112 };
113 </script>
114
115 <style lang="scss" scoped>
116 .swiper {
117 width: 100%;
118 height: 500px;
119 }
120
121 .swiper-slide {
122 text-align: center;
123 font-size: 18px;
124 background: #fff;
125
126 /* Center slide text vertically */
127 display: -webkit-box;
128 display: -ms-flexbox;
129 display: -webkit-flex;
130 display: flex;
131 -webkit-box-pack: center;
132 -ms-flex-pack: center;
133 -webkit-justify-content: center;
134 justify-content: center;
135 -webkit-box-align: center;
136 -ms-flex-align: center;
137 -webkit-align-items: center;
138 align-items: center;
139 }
140 </style>
标签：...,return,debugger,33,params,swiper7,console,swiper,log 来源： https://www.cnblogs.com/jyjy28/p/15686118.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。