d2606b59 by 杨炀

no message

1 parent 6f893b30
Showing 127 changed files with 4438 additions and 318 deletions
...@@ -3,6 +3,8 @@ page { ...@@ -3,6 +3,8 @@ page {
3 overflow: auto; 3 overflow: auto;
4 background: #f5f7f9; 4 background: #f5f7f9;
5 } 5 }
6 .content-bottom{padding-bottom: 120rpx;}
7 .cu-bar.foot{z-index: 1024}
6 .wBox{box-sizing: border-box;} 8 .wBox{box-sizing: border-box;}
7 .h3 {font-weight: bold;line-height: 2;} 9 .h3 {font-weight: bold;line-height: 2;}
8 .text-center{text-align: center;} 10 .text-center{text-align: center;}
...@@ -18,6 +20,10 @@ page { ...@@ -18,6 +20,10 @@ page {
18 .must{color: #AD181F;font-size: 24rpx;} 20 .must{color: #AD181F;font-size: 24rpx;}
19 .vipData .w50{width: 45%;} 21 .vipData .w50{width: 45%;}
20 .esp{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} 22 .esp{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
23 .tag-royal{font-size: 24rpx;color: #5158D5;background-color: #F1F2FF;
24 display: inline;padding: 4rpx 10rpx;border-radius: 50px;
25 }
26
21 .flex{display: flex;} 27 .flex{display: flex;}
22 .flexbox{display: flex;} 28 .flexbox{display: flex;}
23 .mt30{margin-top: 30rpx;} 29 .mt30{margin-top: 30rpx;}
...@@ -127,79 +133,7 @@ font-size: 30rpx!important;} ...@@ -127,79 +133,7 @@ font-size: 30rpx!important;}
127 .text-red{color: #AD181F;} 133 .text-red{color: #AD181F;}
128 .pd30{padding: 30rpx;box-sizing: border-box;} 134 .pd30{padding: 30rpx;box-sizing: border-box;}
129 135
130 .appList{width: 700rpx;margin:30rpx auto; 136
131 .appItem{background: #FFFFFF;padding: 20rpx 30rpx 30rpx;margin-bottom: 30rpx;
132 box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196,203,214,0.1);
133 border-radius: 15rpx;position: relative;
134 .iconbox{position: absolute;left: 20rpx;}
135 .pp{font-size: 26rpx;color: #929AA0;margin-bottom: 10rpx;}
136 .date{padding: 0 0 10rpx;box-sizing: border-box;margin-bottom: 10rpx;
137 font-size: 28rpx;border-bottom: 1px dashed #e5e5e5;
138 color: #7D8592;
139
140 }
141 .name{margin: 30rpx 0 20rpx;color: #0A1629;font-size: 30rpx;}
142 .flexbox{justify-content: space-between;padding:10rpx;
143 background-color: rgba(244, 249, 253, 1);border-radius: 4px;
144 font-size: 28rpx;color: #91929E;box-sizing: border-box;
145 view{font-size: 26rpx;
146 view{color: #0A1629;font-size: 28rpx;}
147 }
148 }
149 .func{display: flex;justify-content: flex-end;box-sizing: border-box;
150 // border-top: 1px dashed #e5e5e5;
151 padding-top: 20rpx;
152 button{border: 1px solid #AD181F;
153 border-radius: 30rpx;height: 60rpx;line-height: 60rpx;
154 font-size: 30rpx;color: #AD181F;background: #fff;
155 margin: 0 0 0 30rpx;padding: 0 40rpx;box-sizing: border-box;
156 }
157 text{font-size: 30rpx;padding:30rpx 0 0;}
158 }
159 .status{position: absolute;font-size: 26rpx;right: 20rpx;top: 15rpx;}
160 // .dot{width: 12rpx;
161 // height: 12rpx;
162 // display: inline-block;
163 // border-radius: 50%;
164 // margin: 6rpx 10rpx 6rpx 0;}
165 .bgline{color: #fff;}
166 &:nth-child(7n){
167 // border-left: 2px solid #448ACA;;
168 .dot{background: #448ACA;}
169 .bgline{background: #448ACA;}
170 }
171 &:nth-child(7n+1){
172 // border-left: 2px solid #EC6941;
173 .dot{background: #EC6941;}
174 .bgline{background: #EC6941;}
175 }
176 &:nth-child(7n+2){
177 // border-left: 2px solid #AD181F;
178 .dot{background: #AD181F;}
179 .bgline{background: #AD181F;}
180 }
181 &:nth-child(7n+3){
182 // border-left: 2px solid #8957A1;
183 .dot{background: #8957A1;}
184 .bgline{background: #8957A1;}
185 }
186 &:nth-child(7n+4){
187 // border-left: 2px solid #00B7EE;
188 .dot{background: #00B7EE;}
189 .bgline{background: #00B7EE;}
190 }
191 &:nth-child(7n+5){
192 // border-left: 2px solid #13B5B1;
193 .dot{background: #13B5B1;}
194 .bgline{background: #13B5B1;}
195 }
196 &:nth-child(7n+6){
197 // border-left: 2px solid #F8B551;
198 .dot{background: #F8B551;}
199 .bgline{background: #F8B551;}
200 }
201 }
202 }
203 .text-gray{color: #919191;} 137 .text-gray{color: #919191;}
204 .text-primary{color: #1561CB;} 138 .text-primary{color: #1561CB;}
205 .text-success{color: #32B16C;} 139 .text-success{color: #32B16C;}
...@@ -412,7 +346,7 @@ background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAOsCAYAAABQx3 ...@@ -412,7 +346,7 @@ background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAOsCAYAAABQx3
412 background-size: cover; 346 background-size: cover;
413 position: relative;} 347 position: relative;}
414 .girdBox{display: flex;flex-wrap: wrap;padding:20rpx 0;box-sizing: border-box; 348 .girdBox{display: flex;flex-wrap: wrap;padding:20rpx 0;box-sizing: border-box;
415 background: #FFFFFF;position: relative;top: -30rpx; 349 background: #FFFFFF;position: relative;
416 border-radius: 20rpx 20rpx 0rpx 0rpx; 350 border-radius: 20rpx 20rpx 0rpx 0rpx;
417 view{width: 25%;text-align: center; box-sizing: border-box; padding: 2% 0; 351 view{width: 25%;text-align: center; box-sizing: border-box; padding: 2% 0;
418 font-size: 24rpx; 352 font-size: 24rpx;
......
1 <template>
2 <view style="height:50px;">
3 <view class="cu-bar foot tabbar whitebg">
4 <view class="action" :class="active=='home'?'text-active':'text-black'"
5 @click="to_switch_tab('/pages/index/index')">
6 <image src="@/static/index/1_dwn.png" v-if="active=='home'"/>
7 <image src="@/static/index/1.png" v-else/>
8 <view>首页</view>
9 </view>
10 <view class="action add-action" :class="active=='auth'?'text-active':'text-black'"
11 @click="to_switch_tab('/pages/webView/auth')">
12 <image src="@/static/index/logo.png"/>
13 <view>认证查询</view>
14 </view>
15 <view class="action" :class="active=='center'?'text-active':'text-black'"
16 @click="to_switch_tab('/pages/myCenter/index')">
17 <image src="@/static/index/3_dwn.png" v-if="active=='center'"/>
18 <image src="@/static/index/3.png" v-else/>
19 <view>我的</view>
20 </view>
21 </view>
22 </view>
23 </template>
24 <script>
25 // import {to_switch_tab} from '@/utils/utils.js'
26 // console.log(to_switch_tab)
27 export default {
28 name: "footer-menu",
29 data(){return {
30 menuData:[]
31 }},
32 mounted() {
33 // console.log(utils)
34 },
35 props:["active"],
36 methods: {
37 to_switch_tab(url) {
38 uni.switchTab({
39 url: url
40 });
41 }
42 }
43 }
44 </script>
45 <style scoped>
46
47 .cu-bar {
48 display: flex;
49 position: relative;
50 align-items: center;
51 min-height: 100upx;
52 justify-content: space-between;
53 }
54 .text-black{color: #7B7F83;}
55 .text-active{color: #D60C18;}
56 .cu-bar .action {
57 display: flex;
58 align-items: center;
59 height: 100%;
60 justify-content: center;
61 max-width: 100%;
62 }
63
64 .cu-bar .action.border-title {
65 position: relative;
66 top: -10upx;
67 }
68
69 .cu-bar .action.border-title text[class*="bg-"]:last-child {
70 position: absolute;
71 bottom: -0.5rem;
72 min-width: 2rem;
73 height: 6upx;
74 left: 0;
75 }
76
77 .cu-bar .action.sub-title {
78 position: relative;
79 top: -0.2rem;
80 }
81
82 .cu-bar .action.sub-title text {
83 position: relative;
84 z-index: 1;
85 }
86
87 .cu-bar .action.sub-title text[class*="bg-"]:last-child {
88 position: absolute;
89 display: inline-block;
90 bottom: -0.2rem;
91 border-radius: 6upx;
92 width: 100%;
93 height: 0.6rem;
94 left: 0.6rem;
95 opacity: 0.3;
96 z-index: 0;
97 }
98
99 .cu-bar .action.sub-title text[class*="text-"]:last-child {
100 position: absolute;
101 display: inline-block;
102 bottom: -0.7rem;
103 left: 0.5rem;
104 opacity: 0.2;
105 z-index: 0;
106 text-align: right;
107 font-weight: 900;
108 font-size: 36upx;
109 }
110
111 .cu-bar.justify-center .action.border-title text:last-child,
112 .cu-bar.justify-center .action.sub-title text:last-child {
113 left: 0;
114 right: 0;
115 margin: auto;
116 text-align: center;
117 }
118
119 .cu-bar .action:first-child {
120 margin-left: 30upx;
121 font-size: 30upx;
122 }
123
124 .cu-bar .action text.text-cut {
125 text-align: left;
126 width: 100%;
127 }
128
129 .cu-bar .cu-avatar:first-child {
130 margin-left: 20upx;
131 }
132
133 .cu-bar .action:first-child>text[class*="cuIcon-"] {
134 margin-left: -0.3em;
135 margin-right: 0.3em;
136 }
137
138 .cu-bar .action:last-child {
139 margin-right: 30upx;
140 }
141
142 .cu-bar .action>text[class*="cuIcon-"],
143 .cu-bar .action>view[class*="cuIcon-"] {
144 font-size: 36upx;
145 }
146
147 .cu-bar .action>text[class*="cuIcon-"]+text[class*="cuIcon-"] {
148 margin-left: 0.5em;
149 }
150
151 .cu-bar .content {
152 position: absolute;
153 text-align: center;
154 width: calc(100% - 340upx);
155 left: 0;
156 right: 0;
157 bottom: 0;
158 top: 0;
159 margin: auto;
160 height: 60upx;
161 font-size: 32upx;
162 line-height: 60upx;
163 cursor: none;
164 pointer-events: none;
165 text-overflow: ellipsis;
166 white-space: nowrap;
167 overflow: hidden;
168 }
169
170 .cu-bar.ios .content {
171 bottom: 7px;
172 height: 30px;
173 font-size: 32upx;
174 line-height: 30px;
175 }
176
177 .cu-bar.btn-group {
178 justify-content: space-around;
179 }
180
181 .cu-bar.btn-group button {
182 padding: 20upx 32upx;
183 }
184
185 .cu-bar.btn-group button {
186 flex: 1;
187 margin: 0 20upx;
188 max-width: 50%;
189 }
190
191 .cu-bar .search-form {
192 background-color: #f5f5f5;
193 line-height: 64upx;
194 height: 64upx;
195 font-size: 24upx;
196 color: #333333;
197 flex: 1;
198 display: flex;
199 align-items: center;
200 margin: 0 30upx;
201 }
202
203 .cu-bar .search-form+.action {
204 margin-right: 30upx;
205 }
206
207 .cu-bar .search-form input {
208 flex: 1;
209 padding-right: 30upx;
210 height: 64upx;
211 line-height: 64upx;
212 font-size: 26upx;
213 background-color: transparent;
214 }
215
216 .cu-bar .search-form [class*="cuIcon-"] {
217 margin: 0 0.5em 0 0.8em;
218 }
219
220 .cu-bar .search-form [class*="cuIcon-"]::before {
221 top: 0upx;
222 }
223
224 .cu-bar.fixed,
225 .nav.fixed {
226 position: fixed;
227 width: 100%;
228 top: 0;
229 z-index: 1024;
230 box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
231 }
232
233 .cu-bar.foot {
234 position: fixed;
235 width: 100%;
236 bottom: 0;
237 z-index: 1024;
238 box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.14);
239 }
240
241 .cu-bar.tabbar {
242 padding: 0;
243 height: calc(100upx + env(safe-area-inset-bottom) / 2);
244 padding-bottom: calc(env(safe-area-inset-bottom) / 2);
245 }
246
247 .cu-tabbar-height {
248 min-height: 100upx;
249 height: calc(100upx + env(safe-area-inset-bottom) / 2);
250 }
251
252 .cu-bar.tabbar.shadow {
253 box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
254 }
255
256 .cu-bar.tabbar .action {
257 font-size: 22upx;
258 position: relative;
259 flex: 1;
260 text-align: center;
261 padding: 0;
262 display: block;
263 height: auto;
264 line-height: 1;
265 margin: 0;
266 background-color: inherit;
267 overflow: initial;
268 }
269
270 .cu-bar.tabbar.shop .action {
271 width: 140upx;
272 flex: initial;
273 }
274
275 .cu-bar.tabbar .action.add-action {
276 position: relative;
277 z-index: 2;
278 padding-top: 50upx;
279 }
280
281 .cu-bar.tabbar .action.add-action image {
282 position: absolute;
283 width: 80upx;
284 z-index: 2;
285 height: 80upx;
286 top: -40upx;
287 left: 0;
288 right: 0;
289 margin: auto;
290 padding: 0;
291 }
292
293 .cu-bar.tabbar .action.add-action::after {
294 content: "";
295 position: absolute;
296 width: 100upx;
297 height: 100upx;
298 top: -50upx;
299 left: 0;
300 right: 0;
301 margin: auto;
302 box-shadow: 0 -3upx 8upx rgba(0, 0, 0, 0.08);
303 border-radius: 50upx;
304 background-color: inherit;
305 z-index: 0;
306 }
307
308 .cu-bar.tabbar .action.add-action::before {
309 content: "";
310 position: absolute;
311 width: 100upx;
312 height: 30upx;
313 bottom: 30upx;
314 left: 0;
315 right: 0;
316 margin: auto;
317 background-color: inherit;
318 z-index: 1;
319 }
320
321 .cu-bar.tabbar .btn-group {
322 flex: 1;
323 display: flex;
324 justify-content: space-around;
325 align-items: center;
326 padding: 0 10upx;
327 }
328
329 .cu-bar.tabbar button.action::after {
330 border: 0;
331 }
332
333
334 .cu-bar.tabbar .action .cuIcon-cu-image {
335 margin: 0 auto;
336 }
337
338
339 .cu-bar.tabbar .submit {
340 align-items: center;
341 display: flex;
342 justify-content: center;
343 text-align: center;
344 position: relative;
345 flex: 2;
346 align-self: stretch;
347 }
348
349 .cu-bar.tabbar .submit:last-child {
350 flex: 2.6;
351 }
352
353 .cu-bar.tabbar .submit+.submit {
354 flex: 2;
355 }
356
357 .cu-bar.tabbar.border .action::before {
358 content: " ";
359 width: 200%;
360 height: 200%;
361 position: absolute;
362 top: 0;
363 left: 0;
364 transform: scale(0.5);
365 transform-origin: 0 0;
366 border-right: 1upx solid rgba(0, 0, 0, 0.1);
367 z-index: 3;
368 }
369
370 .cu-bar.tabbar.border .action:last-child:before {
371 display: none;
372 }
373
374 .cu-bar.input {
375 padding-right: 20upx;
376 background-color: #ffffff;
377 }
378
379 .cu-bar.input input {
380 overflow: initial;
381 line-height: 64upx;
382 height: 64upx;
383 min-height: 64upx;
384 flex: 1;
385 font-size: 30upx;
386 margin: 0 20upx;
387 }
388
389 .cu-bar.input .action {
390 margin-left: 20upx;
391 }
392
393 .cu-bar.input .action [class*="cuIcon-"] {
394 font-size: 48upx;
395 }
396
397 .cu-bar.input input+.action {
398 margin-right: 20upx;
399 margin-left: 0upx;
400 }
401
402 .cu-bar.input .action:first-child [class*="cuIcon-"] {
403 margin-left: 0upx;
404 }
405
406 .tabbar image{width: 40rpx;height: 40rpx;margin: 0 0 8rpx;}
407 .cu-bar.tabbar .action.add-action::after{box-shadow: none;}
408 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,11 +4,11 @@ ...@@ -4,11 +4,11 @@
4 4
5 // staging 会员系统 5 // staging 会员系统
6 // const baseUrl_api = "http://123.60.96.243/stage-api/"; 6 // const baseUrl_api = "http://123.60.96.243/stage-api/";
7 // const baseUrl_api = 'https://ztx.itechtop.cn/stage-api' 7 const baseUrl_api = 'https://ztx.itechtop.cn/stage-api'
8 // const baseUrl_api = 'https://newsystem.taekwondo.org.cn/stage-api/' 8 // const baseUrl_api = 'https://newsystem.taekwondo.org.cn/stage-api/'
9 9
10 // train 10 // train
11 const baseUrl_api = 'http://192.168.1.98:8787' 11 // const baseUrl_api = 'http://192.168.1.98:8787'
12 const trainUrl_api = 'http://192.168.1.98:8686' 12 const trainUrl_api = 'http://192.168.1.98:8686'
13 // match 13 // match
14 // const baseUrl_api = 'http://192.168.1.132:8081' 14 // const baseUrl_api = 'http://192.168.1.132:8081'
......
...@@ -50,7 +50,6 @@ ...@@ -50,7 +50,6 @@
50 import { reactive, toRefs, getCurrentInstance } from 'vue'; 50 import { reactive, toRefs, getCurrentInstance } from 'vue';
51 import * as match from '@/match/js/match.js'; 51 import * as match from '@/match/js/match.js';
52 import {onShow,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'; 52 import {onShow,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app';
53 import _ from 'lodash';
54 const app = getApp(); 53 const app = getApp();
55 const { proxy } = getCurrentInstance(); 54 const { proxy } = getCurrentInstance();
56 const data = reactive({ 55 const data = reactive({
......
...@@ -3,9 +3,8 @@ ...@@ -3,9 +3,8 @@
3 { 3 {
4 "path": "pages/index/index", 4 "path": "pages/index/index",
5 "style": { 5 "style": {
6 "navigationBarTitleText": "中国跆", 6 "navigationBarTitleText": "中国跆拳道协会",
7 "backgroundColor": "#ffffff", 7 "backgroundColor": "#ffffff",
8 "navigationStyle": "custom",
9 "navigationBarTextStyle": "black", 8 "navigationBarTextStyle": "black",
10 "navigationBarBackgroundColor": "#ffffff" 9 "navigationBarBackgroundColor": "#ffffff"
11 } 10 }
...@@ -209,13 +208,13 @@ ...@@ -209,13 +208,13 @@
209 "navigationBarTitleText": "个人中心", 208 "navigationBarTitleText": "个人中心",
210 "enablePullDownRefresh": false 209 "enablePullDownRefresh": false
211 } 210 }
212 }, 211 },
213 { 212 {
214 "path": "personInfo/index", 213 "path": "personInfo/index",
215 "style": { 214 "style": {
216 "navigationBarTitleText": "个人会员信息", 215 "navigationBarTitleText": "个人会员信息",
217 "enablePullDownRefresh": false 216 "enablePullDownRefresh": false
218 } 217 }
219 }, 218 },
220 { 219 {
221 "path": "mytrain/mytrain", 220 "path": "mytrain/mytrain",
...@@ -251,7 +250,7 @@ ...@@ -251,7 +250,7 @@
251 "path": "vipSystem", 250 "path": "vipSystem",
252 "style": { 251 "style": {
253 "navigationBarTitleText": "会员系统", 252 "navigationBarTitleText": "会员系统",
254 "enablePullDownRefresh": false, 253 "enablePullDownRefresh": false,
255 "navigationStyle": "custom" 254 "navigationStyle": "custom"
256 } 255 }
257 }] 256 }]
...@@ -263,15 +262,26 @@ ...@@ -263,15 +262,26 @@
263 } 262 }
264 }, 263 },
265 "tabBar": { 264 "tabBar": {
265 "color": "#7B7F83",
266 "selectedColor": "#D60C18",
267 "borderStyle": "white",
268 "backgroundColor": "#ffffff",
266 "list": [{ 269 "list": [{
267 "pagePath": "pages/index/index", 270 "pagePath": "pages/index/index",
268 "text": "首页" 271 "text": "首页",
272 "iconPath": "static/index/1.png",
273 "selectedIconPath": "static/index/1_dwn.png"
269 }, { 274 }, {
270 "pagePath": "pages/webView/auth", 275 "pagePath": "pages/webView/auth",
271 "text": "认证查询" 276 "text": "认证查询",
277 "iconPath": "static/index/logo.png",
278 "selectedIconPath": "static/index/logo.png"
279
272 }, { 280 }, {
273 "pagePath": "pages/myCenter/index", 281 "pagePath": "pages/myCenter/index",
274 "text": "我的" 282 "text": "我的",
283 "iconPath": "static/index/3.png",
284 "selectedIconPath": "static/index/3_dwn.png"
275 }] 285 }]
276 } 286 }
277 } 287 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <view class="page"> 2 <view class="page">
3 <swiper> 3 <view class="whitebg">
4 <swiper-item>1</swiper-item> 4 <z-swiper v-model="banner" :options="bannerOptions">
5 <swiper-item>2</swiper-item> 5 <z-swiper-item :custom-style="{width:'600rpx',height:'337rpx'}" v-for="(item,index) in banner"
6 <swiper-item>3</swiper-item> 6 :key="index">
7 </swiper> 7 <image class="bannerStyle" mode="aspectFill"
8 <view class="girdBox"> 8 :src="item.url" />
9 <view @click="goPath('/training/trainList')"> 9 </z-swiper-item>
10 <image />新闻资讯 10 </z-swiper>
11 </view> 11 </view>
12 <view @click="goPath('/match/index')"> 12 <view class="girdBox">
13 <image />赛事报名 13 <view @click="goPath('/training/trainList')">
14 </view> 14 <image src="@/static/index/btn01.png" />新闻资讯
15 15 </view>
16 <view @click="goPath('/training/trainList')"> 16 <view @click="goPath('/match/index')">
17 <image />培训报名 17 <image src="@/static/index/btn02.png" />赛事报名
18 </view> 18 </view>
19 <view @click="goPath()"> 19
20 <image />团体会员 20 <view @click="goPath('/training/trainList')">
21 </view> 21 <image src="@/static/index/btn03.png" />培训报名
22 <view @click="goPath()"> 22 </view>
23 <image />地方协会 23 <view @click="goPath()">
24 </view> 24 <image src="@/static/index/btn04.png" />团体会员
25 <view @click="goPath()"> 25 </view>
26 <image />考点查询 26 <view @click="goPath()">
27 </view> 27 <image src="@/static/index/btn05.png" />地方协会
28 <view @click="goPath('/webView/vipSystem')"> 28 </view>
29 <image />会员系统 29 <view @click="goPath()">
30 </view> 30 <image src="@/static/index/btn07.png" />考点查询
31 <view @click="goTab('/pages/myCenter/index')"> 31 </view>
32 <image />我的 32 <view @click="goPath('/webView/vipSystem')">
33 </view> 33 <image src="@/static/index/btn08.png" />会员系统
34 34 </view>
35 </view> 35 <view @click="goTab('/pages/myCenter/index')">
36 </view> 36 <image src="@/static/index/btn01.png" />我的
37 </view>
38
39 </view>
40 <view class="newsBox">
41 <image style="width: 51rpx;height: 56rpx;" src="@/static/index/zx.png" />
42 <z-swiper v-model="list" :custom-style="{height:'50rpx',width:'600rpx'}"
43 :options="{autoplay:true,loop:true,direction: 'vertical',speed:2000}">
44 <z-swiper-item v-for="(item,index) in list" :key="index">
45 <view class="esp">{{item.name}}</view>
46 </z-swiper-item>
47 </z-swiper>
48 </view>
49 <view class="indexTitle">
50 <view class="h3">
51 <image src="@/static/index/hot.png"/>
52 热门活动
53 </view>
54 <view class="more">更多 ></view>
55 </view>
56
57 <view class="activeItem" v-for="n in 3">
58 <view class="info">
59 <view class="name">
60 2022年锡冠联赛锡冠联赛锡冠联赛
61 </view>
62 <view>
63 <view class="tag-royal">已结束</view>
64 </view>
65 <view class="pp esp">报名时间:2024.04.24 - 2024.05.10</view>
66 <view class="pp esp">比赛时间:2024.04.24 - 2024.05.10</view>
67 <view class="pp esp">无与伦比大体育馆博览中心B6馆</view>
68 </view>
69 <view class="imgbox">
70 <view class="type"><text class="text-warning">独立赛</text></view>
71 <image mode="aspectFit" :src="fakeImg"/>
72 </view>
73 </view>
74
75 </view>
76
77 <view class="content content-bottom">
78 <footer-menu :active="'home'" />
79 </view>
37 </template> 80 </template>
38 81
39 <script setup> 82 <script setup>
40 import * as api from '@/common/api.js'; 83 import * as api from '@/common/api.js';
41 import * as loginServer from '@/common/login.js'; 84 import * as loginServer from '@/common/login.js';
42 import config from '@/config.js' 85 import config from '@/config.js'
43 import { 86 import {
44 onLoad, 87 onLoad,
45 onShow, 88 onShow,
46 onReady, 89 onReady,
47 onPullDownRefresh 90 onPullDownRefresh
48 } from '@dcloudio/uni-app'; 91 } from '@dcloudio/uni-app';
49 import { 92 import {
50 ref, 93 ref,
51 getCurrentInstance 94 getCurrentInstance
52 } from 'vue'; 95 } from 'vue';
53
54
55 const {
56 proxy
57 } = getCurrentInstance()
58 const app = getApp();
59 const svId = ref(null);
60
61 const messageList = ref([])
62 onShow(() => {
63 if (app.globalData.isLogin) {
64 init()
65 } else {
66 app.firstLoadCallback = () => {
67 init()
68 };
69 }
70 })
71 onLoad(option => {
72
73 });
74
75
76 function goPath(path) {
77 if(path)
78 uni.navigateTo({
79 url: path
80 });
81 }
82
83 function goTab(path){
84 uni.switchTab({
85 url: path
86 })
87 }
88
89 96
90 function init() {
91 uni.showLoading({
92 title: '加载中'
93 });
94 uni.hideLoading();
95 97
96 } 98 const {
99 proxy
100 } = getCurrentInstance()
101 const app = getApp();
102 const svId = ref(null);
103 const list = ref([{
104 name: '新闻1'
105 }, {
106 name: '全国学生(青年)运动会跆拳道比赛竞委会会议成功召开'
107 }, {
108 name: '跆拳道公益行健康成长比一百分更重要'
109 }]);
110 const bannerOptions = ref({
111 autoplay:true,
112 loop:true,
113 effect: 'coverflow',
114 centeredSlides: true,
115 slidesPerView: 'auto',
116 coverflowEffect: {
117 rotate: 50,
118 stretch: 20,
119 depth: 100,
120 modifier: 1,
121 slideShadows: true,
122 }
123 })
124 const messageList = ref([])
125 const fakeImg = ref('http://36.153.235.222:8001/assets/default-2a29adf3.jpg')
126 const banner = ref([
127 {url:'http://36.153.235.222:8001/stage-api/ztx-webSite/fs/20231213/image/8423158888099946496.png'},
128 {url:'https://xhimg.sports.cn/Image/allimg/231026/45-231026131I5Q3.jpg'},
129 {url:'http://36.153.235.222:8001/assets/default-2a29adf3.jpg'}
130 ])
131 onShow(() => {
132 if (app.globalData.isLogin) {
133 init()
134 } else {
135 app.firstLoadCallback = () => {
136 init()
137 };
138 }
139 })
140 onLoad(option => {
141 // uni.switchTab({
142 // url: '/pages/index/index'
143 // })
144 uni.hideTabBar()
145 });
97 146
98 147
148 function goPath(path) {
149 if (path)
150 uni.navigateTo({
151 url: path
152 });
153 }
99 154
100 function goItem(item) { 155 function goTab(path) {
101 if (item.path) { 156 uni.switchTab({
102 let path = item.path 157 url: path
103 uni.navigateTo({ 158 })
104 url: item.path 159 }
105 }); 160
106 161
107 } else { 162 function init() {
108 uni.showToast({ 163 uni.showLoading({
109 title: `暂未开放`, 164 title: '加载中'
110 icon: 'none' 165 });
111 }); 166 uni.hideLoading();
112 } 167
113 } 168 }
169
170
171
172 function goItem(item) {
173 if (item.path) {
174 let path = item.path
175 uni.navigateTo({
176 url: item.path
177 });
178
179 } else {
180 uni.showToast({
181 title: `暂未开放`,
182 icon: 'none'
183 });
184 }
185 }
114 </script> 186 </script>
115 <style scope lang="scss"> 187 <style scope lang="scss">
116 .page{width: 100vw;overflow: hidden;} 188 .activeItem{display: flex;background: #FFFFFF;margin: 0 auto 24rpx; flex-direction: row;
189 border-radius: 10rpx;width: 700rpx;padding: 20rpx;box-sizing: border-box;
190 .info{flex:1 1 auto;
191 .name{color: #3E3D3D;font-size: 30rpx;}
192 .pp{color: #717171;font-size: 26rpx;margin: 10rpx 0 0 ;}
193 }
194 .imgbox{flex:0 0 auto;display: flex;flex-direction: column; align-items: flex-end;
195 box-sizing: border-box;
196 // padding-left: 20rpx;
197 image{width: 250rpx;aspect-ratio: 16/9;height: 140rpx;border-radius: 10rpx;
198 margin-top: 20rpx;
199 }
200 .type{font-size: 26rpx;}
201 }
202 }
203 .indexTitle{display: flex;justify-content: space-between;padding: 30rpx;align-items: center;
204 .h3{display: flex;color: #313234;font-size: 32rpx;align-items: baseline;
205 image{width: 36rpx;height: 45rpx;margin-right: 15rpx;}
206 }
207 .more{color: #6E727A;font-size: 24rpx;}
208 }
209 .bannerStyle {height: 100%;
210 width: 100%;
211 border-radius: 15rpx;
212 }
213
214 .newsBox {
215 background-color: #fff;
216 display: flex;
217 align-items: center;
218 position: relative;
219 padding: 26rpx 30rpx;
220
221 &::before {
222 content: '';
223 position: absolute;
224 top: 0;
225 height: 1rpx;
226 width: 700rpx;
227 position: absolute;
228 left: 0;
229 right: 0;
230 margin: auto;
231 background: #f8f8f8;
232 }
233 .esp{font-size: 26rpx;font-weight: 400;color: #030303;
234 line-height: 50rpx;}
235 }
236
237 .page {
238 width: 100vw;
239 overflow: hidden;
240 }
241
117 .loginOutIcon { 242 .loginOutIcon {
118 position: relative; 243 position: relative;
119 left: 60rpx; 244 left: 60rpx;
...@@ -126,7 +251,7 @@ function goItem(item) { ...@@ -126,7 +251,7 @@ function goItem(item) {
126 } 251 }
127 252
128 .welcome { 253 .welcome {
129 padding:30rpx 55rpx; 254 padding: 30rpx 55rpx;
130 line-height: 55rpx; 255 line-height: 55rpx;
131 font-size: 36rpx; 256 font-size: 36rpx;
132 } 257 }
...@@ -187,9 +312,9 @@ function goItem(item) { ...@@ -187,9 +312,9 @@ function goItem(item) {
187 font-size: 44rpx; 312 font-size: 44rpx;
188 font-weight: bold; 313 font-weight: bold;
189 color: #29343C; 314 color: #29343C;
190 } 315 }
191 :deep(.uni-section .uni-section-header){ 316
192 padding: 0 30rpx; 317 :deep(.uni-section .uni-section-header) {
193 } 318 padding: 0 30rpx;
194 319 }
195 </style> 320 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <view class="box" v-if='isShow'> 2 <view class="box" v-if='isShow'>
3 <view class="topBg"> 3 <view class="topBg">
4 <view class="userInfoBox"> 4 <view class="userInfoBox">
5 <view class="headImg"> 5 <view class="headImg">
6 <image mode="aspectFill" :src="avatarUrl"></image> 6 <image mode="aspectFill" :src="avatarUrl"></image>
7 </view> 7 </view>
8 <view class="nameBox"> 8 <view class="nameBox">
9 {{ user.nickName }} 9 {{ user.nickName }}
10 <view>{{ user.phonenumber }}</view> 10 <view>{{ user.phonenumber }}</view>
11 </view> 11 </view>
12 </view> 12 </view>
13 </view> 13 </view>
14 <view class="rMainBox"> 14 <view class="rMainBox">
15 <uni-list :border="false" class="myList"> 15 <uni-list :border="false" class="myList">
16 <!-- <uni-list-item :border="false" title="个人信息" showArrow :to="`./myInfo`"> 16 <!-- <uni-list-item :border="false" title="个人信息" showArrow :to="`./myInfo`">
17 <template v-slot:header> 17 <template v-slot:header>
18 <view class="slot-box"> 18 <view class="slot-box">
19 <image class="slot-image" src="/static/user_icon03.png" mode="widthFix"></image> 19 <image class="slot-image" src="/static/user_icon03.png" mode="widthFix"></image>
...@@ -42,114 +42,120 @@ ...@@ -42,114 +42,120 @@
42 </view> 42 </view>
43 </template> 43 </template>
44 </uni-list-item> --> 44 </uni-list-item> -->
45 <uni-list-item :border="false" title="个人会员" showArrow clickable 45 <uni-list-item :border="false" title="个人会员" showArrow clickable
46 @click="goPath('/myCenter/personInfo/index')"> 46 @click="goPath('/myCenter/personInfo/index')">
47 <template v-slot:header> 47 <template v-slot:header>
48 <view class="slot-box"> 48 <view class="slot-box">
49 <image class="slot-image" mode="widthFix"></image> 49 <image class="slot-image" mode="widthFix"></image>
50 </view> 50 </view>
51 </template> 51 </template>
52 </uni-list-item> 52 </uni-list-item>
53 <uni-list-item :border="false" title="我的培训" showArrow clickable 53 <uni-list-item :border="false" title="我的培训" showArrow clickable
54 @click="goPath('/myCenter/mytrain/mytrain')"> 54 @click="goPath('/myCenter/mytrain/mytrain')">
55 <template v-slot:header> 55 <template v-slot:header>
56 <view class="slot-box"> 56 <view class="slot-box">
57 <image class="slot-image" mode="widthFix"></image> 57 <image class="slot-image" mode="widthFix"></image>
58 </view> 58 </view>
59 </template> 59 </template>
60 </uni-list-item> 60 </uni-list-item>
61 61
62 <!-- <uni-list-item :border="false" title="我的赛事" showArrow :to="`./match`"> 62 <!-- <uni-list-item :border="false" title="我的赛事" showArrow :to="`./match`">
63 <template v-slot:header> 63 <template v-slot:header>
64 <view class="slot-box"> 64 <view class="slot-box">
65 <image class="slot-image" src="/static/user_icon04.png" mode="widthFix"></image> 65 <image class="slot-image" src="/static/user_icon04.png" mode="widthFix"></image>
66 </view> 66 </view>
67 </template> 67 </template>
68 </uni-list-item> --> 68 </uni-list-item> -->
69 </uni-list> 69 </uni-list>
70 </view> 70 </view>
71 71
72 </view> 72 </view>
73 <view class="content content-bottom">
74 <footer-menu :active="'center'" />
75 </view>
73 </template> 76 </template>
74 77
75 <script setup> 78 <script setup>
76 import * as my from '@/myCenter/center_api.js'; 79 import * as my from '@/myCenter/center_api.js';
77 import * as loginServer from '@/common/login.js'; 80 import * as loginServer from '@/common/login.js';
78 import { 81 import {
79 onMounted, 82 onMounted,
80 ref 83 ref
81 } from 'vue'; 84 } from 'vue';
82 import { 85 import {
83 onLoad, 86 onLoad,
84 onShow 87 onShow
85 } from '@dcloudio/uni-app'; 88 } from '@dcloudio/uni-app';
86 89
87 const user = ref({}); 90 const user = ref({});
88 const app = getApp(); 91 const app = getApp();
89 const isShow = ref(false) 92 const isShow = ref(false)
90 93
91 onMounted(() => { 94 onShow(() => {
92 init() 95 init()
93 }) 96 })
94 97 onLoad(option => {
95 function init() { 98 uni.hideTabBar()
96 if (app.globalData.isLogin) { 99 })
97 isShow.value = true 100
98 if (app.globalData.userInfo) { 101 function init() {
99 const currUser = app.globalData.userInfo 102 if (app.globalData.isLogin) {
100 user.value = currUser; 103 isShow.value = true
101 } else { 104 if (app.globalData.userInfo) {
102 loginServer.getInfo().then(res => { 105 const currUser = app.globalData.userInfo
103 const currUser = app.globalData.userInfo 106 user.value = currUser;
104 user.value = currUser 107 } else {
105 }) 108 loginServer.getInfo().then(res => {
106 } 109 const currUser = app.globalData.userInfo
107 } else { 110 user.value = currUser
108 uni.redirectTo({ 111 })
109 url: '/pages/index/login?path=' + encodeURIComponent(getCurrentPages()[0].$page.fullPath) 112 }
110 }) 113 } else {
111 } 114 uni.redirectTo({
112 } 115 url: '/pages/index/login?path=' + encodeURIComponent(getCurrentPages()[0].$page.fullPath)
113 116 })
114 function goBack() { 117 }
115 uni.navigateBack({}); 118 }
116 } 119
117 // function goQcode() { 120 function goBack() {
118 // uni.scanCode({ 121 uni.navigateBack({});
119 // onlyFromCamera: true, 122 }
120 // success: function(res) { 123 // function goQcode() {
121 // console.log('条码类型:' + res.scanType); 124 // uni.scanCode({
122 // console.log('条码内容:' + res.result); 125 // onlyFromCamera: true,
123 // api.scanQrCode(res.result).then(res => { 126 // success: function(res) {
124 // uni.showModal({ 127 // console.log('条码类型:' + res.scanType);
125 // title: '提示', 128 // console.log('条码内容:' + res.result);
126 // content: res.msg, 129 // api.scanQrCode(res.result).then(res => {
127 // success: function(res) { 130 // uni.showModal({
128 // if (res.confirm) { 131 // title: '提示',
129 // console.log('确定'); 132 // content: res.msg,
130 // } else if (res.cancel) { 133 // success: function(res) {
131 // console.log('取消'); 134 // if (res.confirm) {
132 // } 135 // console.log('确定');
133 // } 136 // } else if (res.cancel) {
134 // }); 137 // console.log('取消');
135 // }); 138 // }
136 // } 139 // }
137 // }); 140 // });
138 // } 141 // });
139 function building() { 142 // }
140 uni.showToast({ 143 // });
141 title: '暂未开放,敬请期待。', 144 // }
142 icon: 'none', 145 function building() {
143 duration: 2000 146 uni.showToast({
144 }); 147 title: '暂未开放,敬请期待。',
145 } 148 icon: 'none',
146 149 duration: 2000
147 function goPath(path) { 150 });
148 if (path) 151 }
149 uni.navigateTo({ 152
150 url: path 153 function goPath(path) {
151 }); 154 if (path)
152 } 155 uni.navigateTo({
156 url: path
157 });
158 }
153 </script> 159 </script>
154 160
155 <style scoped lang="scss"> 161 <style scoped lang="scss">
......
1 <template> 1 <template>
2 <web-view src="https://newsystem.taekwondo.org.cn/#/authAccurate"> 2 <!-- <web-view src="https://newsystem.taekwondo.org.cn/#/authAccurate">
3 3
4 </web-view> 4 </web-view> -->
5 <view>123</view>
6 <view class="content content-bottom">
7 <footer-menu :active="'auth'" />
8 </view>
5 </template> 9 </template>
6 10
7 <script> 11 <script setup>
12 import {
13 onLoad
14 } from '@dcloudio/uni-app'
15 onLoad(option => {
16 uni.hideTabBar()
17 })
8 </script> 18 </script>
9 19
10 <style> 20 <style>
......
1 MIT License
2
3 Copyright (c) 2022 zebra-ui
4
5 Permission is hereby granted, free of charge, to any person obtaining a copy
6 of this software and associated documentation files (the "Software"), to deal
7 in the Software without restriction, including without limitation the rights
8 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 copies of the Software, and to permit persons to whom the Software is
10 furnished to do so, subject to the following conditions:
11
12 The above copyright notice and this permission notice shall be included in all
13 copies or substantial portions of the Software.
14
15 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 SOFTWARE.
1 <p align="center">
2 <img alt="logo" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/logo.png" width="220" style="margin-bottom: 10px;">
3 </p>
4
5 <h1 align="center">ZebraSwiper</h1>
6
7 <p align="center">基于uniapp,全面对标swiper,并实现全端兼容。</p>
8
9 <p align="center">
10 🔥 <a href="https://swiper.zebraui.com/">文档网站</a>
11 &nbsp;
12 &nbsp;
13 🚀 <a href="https://zebraui.com/" target="_blank">zebraUI组件库</a>
14 </p>
15
16 ## 介绍
17
18 [zebra-swiper](https://github.com/zebra-ui/zebra-uniapp-swiper) 是基于uniapp开发的一款移动端轮播组件,旨在实现一些复杂的轮播交互。
19
20 ## 特性
21
22 - 全面对标swiper,并实现全端兼容
23 - 兼容多端,小程序也可实现3D轮播效果
24 - 可自定义3D效果
25 - 多种示例可供参考
26
27 ## 安装
28
29 ### npm方式
30
31 ```bash
32 npm i @zebra-ui/swiper
33 ```
34
35 ```js
36 // pages.json
37
38 {
39 "easycom": {
40 "autoscan": true,
41 "custom": {
42 "^z-(.*)": "@zebra-ui/swiper/components/z-$1/z-$1.vue"
43 }
44 },
45 "pages": [...],
46 "globalStyle": {...}
47 }
48 ```
49
50 ### uni_modules方式
51
52 [插件市场](https://ext.dcloud.net.cn/plugin?id=7273)直接导入即可
53
54 ## 手机预览
55
56 <div>
57 <img alt="wx" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/wx.jpg" width="200" />
58 <img alt="ali" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/ali.jpg" width="200" />
59 <img alt="h5" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/h5.png" width="200" />
60 </div>
61
62 ## 预览
63 <div style="display:flex;flex-wrap:wrap;margin-top:30px;">
64 <img alt="gif" src="https://assets-1256020106.file.myqcloud.com/zebra-swiper/show/total1.gif" width="300" style="margin:20px;" />
65 <img alt="gif" src="https://assets-1256020106.file.myqcloud.com/zebra-swiper/show/total2.gif" width="300" style="margin:20px;" />
66 <img alt="gif" src="https://assets-1256020106.file.myqcloud.com/zebra-swiper/show/total3.gif" width="300" style="margin:20px;" />
67 </div>
68
69 ## 群
70
71 QQ群:947159437
72
73 ![image](https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/zebra-swiper-group-code.png)
...\ No newline at end of file ...\ No newline at end of file
1 ## 2.2.8(2023-12-21)
2 `2023-12-21`
3
4 **Fix**
5
6 - 修复`vue3`关于`transitionEnd`的相关报错。
7 - 修复`vue3`关于`emit`的相关警告。
8 - 修复`vue3`提示`onResize`方法的的警告。
9 - 修复`vue3`无法使用`virtual`的错误。
10 - 新增关于`vue3`[示例项目](https://github.com/zebra-ui/zebra-swiper/tree/master/demos),包含组合式api用法,开发者在`vue3`项目中使用`zebra-swiper`可获得更好的开发体验。
11 ## 2.2.7(2023-09-15)
12 `2023-09-15`
13
14 **Feat**
15
16 - 新增`controller`控制器,用于多个swiper之间同步切换状态。
17 - 新增虚拟`slide`配置,用于处理在大量数据时产生的卡顿问题。(只能作用于`view`标签,图片及其他标签会出现闪烁问题,h5可使用`img`标签。)
18 - 示例项目样式及目录结构更改。
19
20 **Fix**
21
22 - 修复`swiper`滑动时会导致页面发生滚动的问题。
23 ## 2.2.6(2023-02-20)
24 `2023-02-20`
25
26 **Feat**
27
28 - `panorama`全景切换效果新增`stretch`参数,用于控制slide之间的距离。
29
30 **Fix**
31
32 - 修复字节小程序3D样式失效的问题。
33 - 修复`panorama`切换效果参数无效的问题。
34 - 修复`autoHeight`高度自适应使用报错的问题。(`autoHeight`选项可以正常使用,且在大多数场景下可以正确获取高度)
35 ## 2.2.5(2022-11-10)
36 `2022-11-10`
37
38 **Feat**
39
40 - `cards`卡片切换效果新增`perSlideRotate``perSlideOffset`参数用于控制卡片的偏移距离及旋转角度。
41 - 微信小程序中默认使用虚拟节点渲染,即`virtualHost`: `true`
42
43 **Fix**
44
45 - 修复`pagination`选项开启后,动态控制`swiper`禁用或启用报错的问题。
46 - 修复支付宝小程序3D样式失效的问题。
47 ## 2.2.4(2022-09-23)
48 `2022-09-23`
49
50 **Feat**
51
52 - 新增`noSwiping`参数控制是否禁止触摸。当禁止触摸开启时,不可通过滑动切换。可通过自动切换,`slideTo`等方法切换。
53
54 **Fix**
55
56 - 修复`vue3``app`触摸无效的问题。
57 - 新增触摸事件`touchcancel`
58 ## 2.2.3(2022-07-26)
59 `2022-07-26`
60
61 **Feat**
62
63 - 卡片切换效果`cards`新增`rotate`参数,用于控制卡片切换时是否发生旋转。
64
65 **Fix**
66
67 - 修复微信小程序使用`zebra-swiper`时,页面无法滚动。
68 - 修复`app`报错`toJSON`的问题。
69 - 修复`swiper``vue3`中无法自动播放的问题。
70
71 ## 2.2.2(2022-07-01)
72 `2022-07-01`
73
74 **Feat**
75
76 - 兼容`PC`浏览器端。
77 - 初步兼容`VUE3`
78
79 **Fix**
80
81 - 修复使用`zebra-swiper`时,页面无法滚动。(`zebra-swiper`将不再默认阻止事件冒泡)。
82 ## 2.2.1(2022-03-31)
83 `2022-03-31`
84
85 **Feat**
86
87 - 新增`changeDirection`方法,该方法用于动态改变swiper方向。
88 - `z-swiper-item`新增`swiperItemWidth` `swiperItemHeight` 属性,用于在swiper无法正确获取宽高的情况下设置swiper的宽高(如快手小程序)。
89
90 **Fix**
91
92 - 消除快手小程序itemPropWxs的警告。
93 ## 2.2.0(2022-03-21)
94 `2022-03-21`
95
96 **本次更新调整了组件的整体架构及组件入口逻辑。主要为性能优化,不涉及新功能。**
97
98 不兼容性更新:
99
100 - `z-swiper``customStyle` 由字符串类型更改为Object类型(与`z-swiper-item`保持一致)。
101 - `z-swiper-item` 删除了加载的效果。
102
103 **Fix**
104
105 - 修复因数据改变而无法正确触发更新的问题。
106 - 修复方法 `disable` `enable` 提示未定义的问题。
107
108 **Perf**
109
110 - 组件首次渲染速度优化。
111 - loop模式处理数据后才开始加载swiper,确保数据的一致性。
112 - 部分同步方法更改为异步,体验更流畅。
113 ## 2.1.4(2022-03-05)
114 `2022-03-05`
115
116 **Feat**
117
118 - 高级案例加入开屏页。[点击预览](https://swiper.zebraui.com/h5/pages/demos/paper/index)
119
120 **Fix**
121
122 - 修复百度小程序高度计算错误的问题。
123 ## 2.1.3(2022-03-03)
124 `2022-03-03`
125
126 **Feat**
127
128 - 新增高级案例模块。
129 - 高级案例加入环游地球。[点击预览](https://swiper.zebraui.com/h5/pages/demos/travel-slider/index)
130 - 微信小程序,qq小程序使用wxs赋值样式。
131 ## 2.1.2(2022-03-02)
132 `2022-03-02`
133
134 本次改版涉及所有开启loop的功能。请更新后删除手动拼接的数据。
135
136 **Feat**
137
138 - loop无限循环模式无需再手动拼接数据。
139 ## 2.1.1(2022-03-01)
140 `2022-03-01`
141
142 **Fix**
143
144 - 修复字节小程序轮播内容不显示的问题。
145 - 修复字节小程序获取位置信息错误的问题。
146
147 **Docs**
148
149 - [文档新增事件。](https://swiper.zebraui.com/basic/events/)
150 ## 2.1.0(2022-02-27)
151 `2022-02-27`
152
153 更新须知
154
155 使用组件时,需在z-swiper标签上以`v-model`的形式传入list数据,也就是要循环的列表数据,该属性为强制性,不加会导致意外错误。例:
156
157 之前的方式:
158
159 ```vue
160 <z-swiper>
161 <z-swiper-item v-for="(item,index) in list" :key="index">
162 <image class="image" :src="item" mode="aspectFill">
163 </image>
164 </z-swiper-item>
165 </z-swiper>
166 ```
167
168 现在的方式:
169
170 ```vue
171 <z-swiper v-model="list"> //这里传入的需和下方循环的保持一致
172 <z-swiper-item v-for="(item,index) in list" :key="index">
173 <image class="image" :src="item" mode="aspectFill">
174 </image>
175 </z-swiper-item>
176 </z-swiper>
177 ```
178
179 这个操作也为swiper接管数据操作铺垫,对后续很多新功能非常有用,也为loop无限循环的痛点提供了解决方案。
180
181 **Fix**
182
183 - 修复数据为空时报错。
184 - 修复请求数据时swiper提前初始化的问题。
185
186 **Feat**
187
188 - 新增滚动条功能。
189 ## 2.0.1(2022-02-25)
190 `2022-02-25`
191
192 **Fix**
193
194 - 修复插槽内容class样式不生效问题。
195
196 **Feat**
197
198 - 新增缩略图功能。
199 ## 2.0.0(2022-02-24)
200 `2022-02-24`
201
202 **Feat**
203
204 - 该版本为破坏性改版,无法兼容1.0。
205 - 代码重构,使用模块化将功能分割,大幅提升性能,方便后续维护。
206 - 全面对标swiper组件,并实现全端兼容。小程序也可实现炫酷的轮播效果。
207 - 所有切换效果全部支持loop无限循环。
208 - 新增全景切换效果。
209 - 新增轮播块功能,可自定义显示数量。
210 - 新增进度条指示器。
211 ## 1.0.7(2022-01-25)
212 `2022-01-25`
213
214 **Feat**
215
216 - 新增轮播切换器功能,可使用默认切换或自定义切换。
217 - 示例项目新增切换器的使用及自定义切换器。
218 ## 1.0.6(2022-01-24)
219 `2022-01-24`
220
221 **Chore**
222
223 - 示例项目新增指示器的使用及自定义指示器。
224 ## 1.0.5(2022-01-21)
225 `2022-01-21`
226
227 **Docs**
228
229 - README.md新增手机预览,包含微信,支付宝小程序码,H5二维码。
230 ## 1.0.4(2022-01-20)
231 `2022-01-20`
232
233 **Style**
234
235 - 示例项目首页px统一修改为rpx。
236 ## 1.0.3(2022-01-19)
237 `2022-01-19`
238
239 **Fix**
240
241 - 修复轮播设置为纵向时,高度错误的问题。
242 - 修复在百度小程序中样式错乱的问题。
243
244 ## 1.0.2(2022-01-18)
245 `2022-01-18`
246 **Docs**
247
248 - README.md新增gif预览图
249 - 修复因未知原因引起的uni_modules组件上传错误的问题。
250
251 `2022-01-14`
252 ### [v1.0.1](https://github.com/zebra-ui/zebra-uniapp-swiper)
253 **Feature**
254
255 - 新增zebra-swiper,zebra-swiper-item组件。
256 - 新增多种3D切换效果。包括渐变,方块,3D流,翻转,卡片,创意性等多种切换效果。
257 - 新增[示例项目](https://swiper.zebraui.com),包含多种切换效果示例。
1 <template>
2 <!-- #ifndef MP-WEIXIN || MP-QQ -->
3 <view :class="['swiper-slide',slideClass]" :style="[itemStyle,customStyle]" @click.stop="onClickSlide">
4 <!-- #endif -->
5 <!-- #ifdef MP-WEIXIN || MP-QQ -->
6 <view :class="['swiper-slide',slideClass]" :style="[itemStyle,customStyle]" @click.stop="onClickSlide"
7 :swiperItemTransform="wxsItemTransform" :change:swiperItemTransform="zSwiperWxs.wxsItemTransformObserver">
8 <!-- #endif -->
9 <slot></slot>
10 </view>
11 </template>
12 <!-- #ifdef MP-WEIXIN || MP-QQ -->
13 <script src="../../wxs/z-swiper-wxs.wxs" module="zSwiperWxs" lang="wxs"></script>
14 <!-- #endif -->
15 <script>
16 import {
17 ChildrenMixin
18 } from '../../libs/mixins/relation.js';
19 import {
20 getRect
21 } from '../../libs/utils/utils.js';
22 export default {
23 name: "z-swipe-item",
24 // #ifdef MP-WEIXIN
25 options: {
26 virtualHost: true
27 },
28 // #endif
29 mixins: [ChildrenMixin('zSwipe')],
30 props: {
31 customStyle: {
32 type: Object,
33 default: () => {
34 return {};
35 }
36 },
37 swiperItemWidth: {
38 type: [String, Number],
39 default: 0
40 },
41 swiperItemHeight: {
42 type: [String, Number],
43 default: 0
44 },
45 },
46 data() {
47 return {
48 wxsItemTransform: "",
49 itemStyle: {},
50 offsetLeft: 0,
51 offsetTop: 0,
52 itemClass: [],
53 width: 0,
54 height: 0,
55 };
56 },
57 mounted() {
58 this.getSize();
59 },
60 computed: {
61 slideClass() {
62 return this.itemClass.join(" ");
63 }
64 },
65 watch: {
66 swiperItemWidth: {
67 handler(val) {
68 if (val) {
69 this.$set(this.itemStyle, 'width', this.unitFormat(val, "rpx"))
70 }
71 },
72 immediate: true
73 },
74 swiperItemHeight: {
75 handler(val) {
76 if (val) {
77 this.$set(this.itemStyle, 'height', this.unitFormat(val, "rpx"))
78 }
79 },
80 immediate: true
81 }
82 },
83 methods: {
84 unitFormat(val, type) {
85 if (type == "rpx") {
86 if (val.includes("rpx") || val.includes("px")) {
87 return val;
88 } else {
89 return val + 'px';
90 }
91 }
92 if (type == "number") {
93 if (val.includes("rpx")) {
94 return uni.upx2px(parseInt(val.replace("rpx", "")))
95 } else if (!val.includes("rpx") && val.includes("px")) {
96 return parseInt(val.replace("px", ""))
97 } else {
98 return val;
99 }
100 }
101 },
102 onClickSlide(event) {
103 this.$emit("click", {
104 event,
105 index: this.index
106 });
107 this.parent.swiper.updateClickedSlide(this.index);
108 this.parent.swiper.emit("slideClick", this.index);
109 },
110 transform(value) {
111 // #ifndef MP-WEIXIN || MP-QQ
112 this.$set(this.itemStyle, 'transform', value)
113 // #endif
114 // #ifdef MP-WEIXIN || MP-QQ
115 this.wxsItemTransform = value
116 // #endif
117 },
118 transition(value) {
119 // #ifdef MP-BAIDU
120 this.$set(this.itemStyle, 'transitionDuration', `${value}ms`)
121 // #endif
122 // #ifndef MP-BAIDU
123 this.$set(this.itemStyle, 'transition-duration', `${value}ms`)
124 // #endif
125 },
126 willChange(value) {
127 this.$set(this.itemStyle, 'will-change', value)
128 },
129 css(value) {
130 Object.keys(value).forEach((item) => {
131 this.$set(this.itemStyle, item, value[item])
132 })
133 },
134 transitionEnd(callback, duration) {
135 setTimeout(callback, duration)
136 },
137 getSize() {
138 const query = uni.createSelectorQuery().in(this);
139 return new Promise((resolve, reject) => {
140 query.select('.swiper-slide').boundingClientRect(data => {
141 if (this.swiperItemWidth) {
142 this.width = this.unitFormat(this.swiperItemWidth, "number");
143 this.height = data.height;
144 }
145 if (this.swiperItemHeight) {
146 this.width = data.width;
147 this.height = this.unitFormat(this.swiperItemHeight, "number");
148 }
149 if (!this.swiperItemWidth && !this.swiperItemHeight) {
150 this.width = data.width;
151 this.height = data.height;
152 }
153 resolve({
154 width: this.width,
155 height: this.height
156 })
157 }).exec();
158 })
159 },
160 addClass(value) {
161 this.itemClass = Array.from(new Set([...this.itemClass, ...value.split(" ")]));
162 },
163 removeClass(value) {
164 this.itemClass = this.itemClass.filter(item => !value.split(" ").includes(item));
165 },
166 hasClass(value) {
167 return this.itemClass.includes(value);
168 },
169 nextAll() {
170 return this.parent.children.filter((item) => {
171 return item.index > this.index
172 })
173 },
174 prevAll() {
175 return this.parent.children.filter((item) => {
176 return item.index < this.index
177 }).reverse()
178 },
179 }
180 }
181 </script>
182
183 <style scoped lang="scss">
184 @import '../../libs/core.scss';
185 </style>
1 <!-- uni_modules发布插件时,components中必须有一个和父级名称一致的组件,否则提示指定目录不存在,这样做的具体原因未知。故此文件为无用文件,仅做为上传插件时消除错误使用。 -->
2 <template>
3 </template>
4 <script>
5 </script>
6 <style>
7 </style>
1 import Swiper from "./libs/core.js";
2 import Autoplay from './modules/autoplay/autoplay.js';
3 import FreeMode from './modules/free-mode/free-mode.js';
4 import EffectFade from './modules/effect-fade/effect-fade.js';
5 import EffectCube from './modules/effect-cube/effect-cube.js';
6 import EffectCoverflow from './modules/effect-coverflow/effect-coverflow.js';
7 import EffectFlip from './modules/effect-flip/effect-flip.js';
8 import EffectCards from './modules/effect-cards/effect-cards.js';
9 import EffectCreative from './modules/effect-creative/effect-creative.js';
10 import EffectPanorama from './modules/effect-panorama/effect-panorama.js';
11 import EffectCarousel from './modules/effect-carousel/effect-carousel.js';
12 import Navigation from './modules/navigation/navigation.js';
13 import Pagination from './modules/pagination/pagination.js';
14 import Thumbs from './modules/thumbs/thumbs.js';
15 import Scrollbar from './modules/scrollbar/scrollbar.js';
16 import Virtual from './modules/virtual/virtual.js';
17 import Controller from './modules/controller/controller.js';
18 import WillChange from './modules/will-change/will-change.js';
19 export {
20 default as Swiper,
21 default
22 }
23 from './libs/core.js';
24 const modules = [Autoplay, FreeMode, EffectFade, EffectCube, EffectCoverflow, EffectFlip, EffectCards, EffectCreative,
25 EffectPanorama, EffectCarousel, Navigation, Pagination, Thumbs, Scrollbar, WillChange, Virtual, Controller
26 ];
27 Swiper.use(modules);
...\ No newline at end of file ...\ No newline at end of file
1 function checkOverflow() {
2 const swiper = this;
3 const {
4 isLocked: wasLocked,
5 params
6 } = swiper;
7 const {
8 slidesOffsetBefore
9 } = params;
10
11 if (slidesOffsetBefore) {
12 const lastSlideIndex = swiper.slides.length - 1;
13 const lastSlideRightEdge = swiper.slidesGrid[lastSlideIndex] + swiper.slidesSizesGrid[lastSlideIndex] +
14 slidesOffsetBefore * 2;
15 swiper.isLocked = swiper.size > lastSlideRightEdge;
16 } else {
17 swiper.isLocked = swiper.snapGrid.length === 1;
18 }
19
20 if (params.allowSlideNext === true) {
21 swiper.allowSlideNext = !swiper.isLocked;
22 }
23
24 if (params.allowSlidePrev === true) {
25 swiper.allowSlidePrev = !swiper.isLocked;
26 }
27
28 if (wasLocked && wasLocked !== swiper.isLocked) {
29 swiper.isEnd = false;
30 }
31
32 if (wasLocked !== swiper.isLocked) {
33 swiper.emit(swiper.isLocked ? 'lock' : 'unlock');
34 }
35 }
36
37 export default {
38 checkOverflow
39 };
1 function prepareClasses(entries, prefix) {
2 const resultClasses = [];
3 entries.forEach(item => {
4 if (typeof item === 'object') {
5 Object.keys(item).forEach(classNames => {
6 if (item[classNames]) {
7 resultClasses.push(prefix + classNames);
8 }
9 });
10 } else if (typeof item === 'string') {
11 resultClasses.push(prefix + item);
12 }
13 });
14 return resultClasses;
15 }
16
17 export default function addClasses() {
18 const swiper = this;
19 const {
20 classNames,
21 params,
22 rtl,
23 $el,
24 device,
25 support
26 } = swiper; // prettier-ignore
27
28 const suffixes = prepareClasses(['initialized', params.direction, {
29 'pointer-events': !support.touch
30 }, {
31 'free-mode': swiper.params.freeMode && params.freeMode.enabled
32 }, {
33 'autoheight': params.autoHeight
34 }, {
35 'rtl': rtl
36 }, {
37 'grid': params.grid && params.grid.rows > 1
38 }, {
39 'grid-column': params.grid && params.grid.rows > 1 && params.grid.fill === 'column'
40 }, {
41 'android': device.android
42 }, {
43 'ios': device.ios
44 }, {
45 'css-mode': params.cssMode
46 }, {
47 'centered': params.cssMode && params.centeredSlides
48 }], params.containerModifierClass);
49 classNames.push(...suffixes);
50 $el.addClass([...classNames].join(' '));
51 swiper.emitContainerClasses();
52 }
...\ No newline at end of file ...\ No newline at end of file
1 import addClasses from './addClasses.js';
2 import removeClasses from './removeClasses.js';
3 export default {
4 addClasses,
5 removeClasses
6 };
...\ No newline at end of file ...\ No newline at end of file
1 export default function removeClasses() {
2 const swiper = this;
3 const {
4 $el,
5 classNames
6 } = swiper;
7 $el.removeClass(classNames.join(' '));
8 swiper.emitContainerClasses();
9 }
...\ No newline at end of file ...\ No newline at end of file
1 $themeColor: #007aff !default;
2
3 :root {
4 --swiper-theme-color: #{$themeColor};
5 }
6 .swiper {
7 margin-left: auto;
8 margin-right: auto;
9 position: relative;
10 overflow: hidden;
11 list-style: none;
12 padding: 0;
13 /* Fix of Webkit flickering */
14 z-index: 1;
15 }
16 .swiper-vertical > .swiper-wrapper {
17 flex-direction: column;
18 }
19 .swiper-wrapper {
20 position: relative;
21 width: 100%;
22 height: 100%;
23 z-index: 1;
24 display: flex;
25 transition-property: transform;
26 box-sizing: content-box;
27 }
28 .swiper-android .swiper-slide,
29 .swiper-wrapper {
30 transform: translate3d(0px, 0, 0);
31 }
32 .swiper-pointer-events {
33 touch-action: pan-y;
34 &.swiper-vertical {
35 touch-action: pan-x;
36 }
37 }
38 .swiper-slide {
39 flex-shrink: 0;
40 width: 100%;
41 height: 100%;
42 position: relative;
43 transition-property: transform;
44 }
45 .swiper-slide-invisible-blank {
46 visibility: hidden;
47 }
48 /* Auto Height */
49 .swiper-autoheight {
50 &,
51 .swiper-slide {
52 height: auto;
53 }
54
55 .swiper-wrapper {
56 align-items: flex-start;
57 transition-property: transform, height;
58 }
59 }
60 .swiper-slide-3d{
61 transform-style: preserve-3d;
62 }
63 /* 3D Effects */
64 .swiper-3d {
65 &,
66 &.swiper-css-mode .swiper-wrapper {
67 perspective: 1200px;
68 }
69 .swiper-wrapper,
70 .swiper-slide,
71 .swiper-slide-shadow,
72 .swiper-slide-shadow-left,
73 .swiper-slide-shadow-right,
74 .swiper-slide-shadow-top,
75 .swiper-slide-shadow-bottom,
76 .swiper-cube-shadow {
77 transform-style: preserve-3d;
78 }
79 .swiper-slide-shadow,
80 .swiper-slide-shadow-left,
81 .swiper-slide-shadow-right,
82 .swiper-slide-shadow-top,
83 .swiper-slide-shadow-bottom {
84 position: absolute;
85 left: 0;
86 top: 0;
87 width: 100%;
88 height: 100%;
89 pointer-events: none;
90 z-index: 10;
91 }
92 .swiper-slide-shadow {
93 background: rgba(0, 0, 0, 0.15);
94 }
95 .swiper-slide-shadow-left {
96 background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
97 }
98 .swiper-slide-shadow-right {
99 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
100 }
101 .swiper-slide-shadow-top {
102 background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
103 }
104 .swiper-slide-shadow-bottom {
105 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
106 }
107 }
108
109 /* CSS Mode */
110 .swiper-css-mode {
111 > .swiper-wrapper {
112 overflow: auto;
113 scrollbar-width: none; /* For Firefox */
114 -ms-overflow-style: none; /* For Internet Explorer and Edge */
115 &::-webkit-scrollbar {
116 display: none;
117 }
118 }
119 > .swiper-wrapper > .swiper-slide {
120 scroll-snap-align: start start;
121 }
122 }
123 .swiper-horizontal.swiper-css-mode {
124 > .swiper-wrapper {
125 scroll-snap-type: x mandatory;
126 }
127 }
128 .swiper-vertical.swiper-css-mode {
129 > .swiper-wrapper {
130 scroll-snap-type: y mandatory;
131 }
132 }
133
134 .swiper-horizontal {
135 touch-action: pan-y;
136 }
137 .swiper-vertical {
138 touch-action: pan-x;
139 }
140
141 .swiper-centered {
142 > .swiper-wrapper::before {
143 content: '';
144 flex-shrink: 0;
145 order: 9999;
146 }
147 &.swiper-horizontal {
148 > .swiper-wrapper > .swiper-slide:first-child {
149 margin-inline-start: var(--swiper-centered-offset-before);
150 }
151 > .swiper-wrapper::before {
152 height: 100%;
153 width: var(--swiper-centered-offset-after);
154 }
155 }
156 &.swiper-vertical {
157 > .swiper-wrapper > .swiper-slide:first-child {
158 margin-block-start: var(--swiper-centered-offset-before);
159 }
160 > .swiper-wrapper::before {
161 width: 100%;
162 height: var(--swiper-centered-offset-after);
163 }
164 }
165
166 > .swiper-wrapper > .swiper-slide {
167 scroll-snap-align: center center;
168 }
169 }
170
171 @import "../modules/effect-fade/effect-fade.scss";
172 @import "../modules/effect-cube/effect-cube.scss";
173 @import "../modules/effect-coverflow/effect-coverflow.scss";
174 @import "../modules/effect-flip/effect-flip.scss";
175 @import "../modules/effect-cards/effect-cards.scss";
176 @import "../modules/effect-creative/effect-creative.scss";
177 @import "../modules/effect-panorama/effect-panorama.scss";
178 @import "../modules/effect-carousel/effect-carousel.scss";
179 @import "../modules/navigation/navigation.scss";
180 @import "../modules/pagination/pagination.scss";
181 @import "../modules/thumbs/thumbs.scss";
182 @import "../modules/scrollbar/scrollbar.scss";
...\ No newline at end of file ...\ No newline at end of file
1 export default {
2 init: true,
3 direction: 'horizontal',
4 touchEventsTarget: 'wrapper',
5 initialSlide: 0,
6 speed: 300,
7 cssMode: false,
8 updateOnWindowResize: true,
9 resizeObserver: true,
10 nested: false,
11 createElements: false,
12 enabled: true,
13 focusableElements: 'input, select, option, textarea, button, video, label',
14 // Overrides
15 width: null,
16 height: null,
17 //
18 preventInteractionOnTransition: false,
19 // ssr
20 userAgent: null,
21 url: null,
22 // To support iOS's swipe-to-go-back gesture (when being used in-app).
23 edgeSwipeDetection: false,
24 edgeSwipeThreshold: 20,
25 // Autoheight
26 autoHeight: false,
27 // Set wrapper width
28 setWrapperSize: false,
29 // Virtual Translate
30 virtualTranslate: false,
31 virtualList: [],
32 virtualIndexList: [],
33 // Effects
34 effect: 'slide',
35 // 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
36 // Breakpoints
37 breakpoints: undefined,
38 breakpointsBase: 'window',
39 // Slides grid
40 spaceBetween: 0,
41 slidesPerView: 1,
42 slidesPerGroup: 1,
43 slidesPerGroupSkip: 0,
44 slidesPerGroupAuto: false,
45 centeredSlides: false,
46 centeredSlidesBounds: false,
47 slidesOffsetBefore: 0,
48 // in px
49 slidesOffsetAfter: 0,
50 // in px
51 normalizeSlideIndex: true,
52 centerInsufficientSlides: false,
53 // Disable swiper and hide navigation when container not overflow
54 watchOverflow: true,
55 // Round length
56 roundLengths: false,
57 // Touches
58 touchRatio: 1,
59 touchAngle: 45,
60 simulateTouch: true,
61 shortSwipes: true,
62 longSwipes: true,
63 longSwipesRatio: 0.5,
64 longSwipesMs: 300,
65 followFinger: true,
66 allowTouchMove: true,
67 threshold: 0,
68 touchMoveStopPropagation: false,
69 touchStartPreventDefault: true,
70 touchStartForcePreventDefault: false,
71 touchReleaseOnEdges: false,
72 // Unique Navigation Elements
73 uniqueNavElements: true,
74 // Resistance
75 resistance: true,
76 resistanceRatio: 0.85,
77 // Progress
78 watchSlidesProgress: false,
79 // Cursor
80 grabCursor: false,
81 // Clicks
82 preventClicks: true,
83 preventClicksPropagation: true,
84 slideToClickedSlide: false,
85 // Images
86 preloadImages: true,
87 updateOnImagesReady: true,
88 // loop
89 loop: false,
90 loopAdditionalSlides: 0,
91 loopedSlides: null,
92 loopFillGroupWithBlank: false,
93 loopPreventsSlide: true,
94 // rewind
95 rewind: false,
96 // Swiping/no swiping
97 allowSlidePrev: true,
98 allowSlideNext: true,
99 swipeHandler: null,
100 // '.swipe-handler',
101 noSwiping: false,
102 noSwipingClass: 'swiper-no-swiping',
103 noSwipingSelector: null,
104 // Passive Listeners
105 passiveListeners: true,
106 // NS
107 containerModifierClass: 'swiper-',
108 // NEW
109 slideClass: 'swiper-slide',
110 slideBlankClass: 'swiper-slide-invisible-blank',
111 slideActiveClass: 'swiper-slide-active',
112 slideDuplicateActiveClass: 'swiper-slide-duplicate-active',
113 slideVisibleClass: 'swiper-slide-visible',
114 slideDuplicateClass: 'swiper-slide-duplicate',
115 slideNextClass: 'swiper-slide-next',
116 slideDuplicateNextClass: 'swiper-slide-duplicate-next',
117 slidePrevClass: 'swiper-slide-prev',
118 slideDuplicatePrevClass: 'swiper-slide-duplicate-prev',
119 wrapperClass: 'swiper-wrapper',
120 slideThumbsClass: 'swiper-slide-thumb',
121 // Callbacks
122 runCallbacksOnInit: true,
123 // Internals
124 _emitClasses: false,
125 willChange: false
126 };
1 /* eslint-disable no-underscore-dangle */
2 export default {
3 on(events, handler, priority) {
4 const self = this;
5
6 if (typeof handler !== 'function') return self;
7 const method = priority ? 'unshift' : 'push';
8 events.split(' ').forEach(event => {
9 if (!self.eventsListeners[event]) self.eventsListeners[event] = [];
10 self.eventsListeners[event][method](handler);
11 });
12
13 return self;
14 },
15
16 once(events, handler, priority) {
17 const self = this;
18 if (typeof handler !== 'function') return self;
19
20 function onceHandler(...args) {
21 self.off(events, onceHandler);
22
23 if (onceHandler.__emitterProxy) {
24 delete onceHandler.__emitterProxy;
25 }
26
27 handler.apply(self, args);
28 }
29
30 onceHandler.__emitterProxy = handler;
31 return self.on(events, onceHandler, priority);
32 },
33
34 onAny(handler, priority) {
35 const self = this;
36 if (typeof handler !== 'function') return self;
37 const method = priority ? 'unshift' : 'push';
38
39 if (self.eventsAnyListeners.indexOf(handler) < 0) {
40 self.eventsAnyListeners[method](handler);
41 }
42
43 return self;
44 },
45
46 offAny(handler) {
47 const self = this;
48 if (!self.eventsAnyListeners) return self;
49 const index = self.eventsAnyListeners.indexOf(handler);
50
51 if (index >= 0) {
52 self.eventsAnyListeners.splice(index, 1);
53 }
54
55 return self;
56 },
57
58 off(events, handler) {
59 const self = this;
60 if (!self.eventsListeners) return self;
61 events.split(' ').forEach(event => {
62 // self.native.off(event, handler);
63 if (typeof handler === 'undefined') {
64 self.eventsListeners[event] = [];
65 } else if (self.eventsListeners[event]) {
66 self.eventsListeners[event].forEach((eventHandler, index) => {
67 if (eventHandler === handler || eventHandler.__emitterProxy && eventHandler
68 .__emitterProxy === handler) {
69 self.eventsListeners[event].splice(index, 1);
70 }
71 });
72 }
73 });
74 return self;
75 },
76
77 emit(...args) {
78 const self = this;
79 if (!self.eventsListeners) return self;
80 let events;
81 let data;
82 let context;
83
84 if (typeof args[0] === 'string' || Array.isArray(args[0])) {
85 events = args[0];
86 data = args.slice(1, args.length);
87 context = self;
88 } else {
89 events = args[0].events;
90 data = args[0].data;
91 context = args[0].context || self;
92 }
93
94 data.unshift(context);
95
96 const eventsArray = Array.isArray(events) ? events : events.split(' ');
97
98 eventsArray.forEach(event => {
99 // console.log(event)
100 if (self.eventsAnyListeners && self.eventsAnyListeners.length) {
101 self.eventsAnyListeners.forEach(eventHandler => {
102 eventHandler.apply(context, [event, ...data]);
103 });
104 }
105 if (self.eventsListeners && self.eventsListeners[event]) {
106 self.eventsListeners[event].forEach(eventHandler => {
107 eventHandler.apply(context, data);
108 });
109 }
110 });
111
112 return self;
113 }
114
115 };
1 import setGrabCursor from './setGrabCursor.js';
2 import unsetGrabCursor from './unsetGrabCursor.js';
3 export default {
4 setGrabCursor,
5 unsetGrabCursor
6 };
...\ No newline at end of file ...\ No newline at end of file
1 export default function setGrabCursor(moving) {
2 const swiper = this;
3 if (swiper.support.touch || !swiper.params.simulateTouch || swiper.params.watchOverflow && swiper.isLocked || swiper
4 .params.cssMode) return;
5 const el = swiper.params.touchEventsTarget === 'container' ? swiper.$el : swiper.$wrapperEl;
6 el.setCss({
7 cursor: 'move',
8 cursor: moving ? '-webkit-grabbing' : '-webkit-grab',
9 cursor: moving ? '-moz-grabbin' : '-moz-grab',
10 cursor: moving ? 'grabbing' : 'grab',
11 })
12 }
1 export default function unsetGrabCursor() {
2 const swiper = this;
3 if (swiper.support.touch || swiper.params.watchOverflow && swiper.isLocked || swiper.params.cssMode) {
4 return;
5 }
6 swiper[swiper.params.touchEventsTarget === 'container' ? '$el' : '$wrapperEl'].setCss({
7 cursor: ''
8 });
9 }
1 import loopCreate from './loopCreate.js';
2 import loopFix from './loopFix.js';
3 import loopDestroy from './loopDestroy.js';
4 export default {
5 loopCreate,
6 loopFix,
7 loopDestroy
8 };
...\ No newline at end of file ...\ No newline at end of file
1 export default function loopCreate() {
2 const swiper = this;
3 const {
4 params,
5 $wrapperEl,
6 native
7 } = swiper; // Remove duplicated slides
8 const $selector = $wrapperEl;
9 let slides = native.children;
10
11 if (params.loopFillGroupWithBlank) {
12 const blankSlidesNum = params.slidesPerGroup - slides.length % params.slidesPerGroup;
13
14 if (blankSlidesNum !== params.slidesPerGroup) {
15 native.loopBlankShow = true;
16 native.loopBlankNumber = blankSlidesNum;
17 }
18 }
19
20 if (params.slidesPerView === 'auto' && !params.loopedSlides) params.loopedSlides = slides.length;
21 swiper.loopedSlides = Math.ceil(parseFloat(params.loopedSlides || params.slidesPerView, 10));
22 swiper.loopedSlides += params.loopAdditionalSlides;
23
24 if (swiper.loopedSlides > slides.length) {
25 swiper.loopedSlides = slides.length;
26 }
27 const prependSlides = [];
28 const appendSlides = [];
29 slides.forEach((el, index) => {
30 const slide = el;
31 if (index < slides.length && index >= slides.length - swiper.loopedSlides) {
32 prependSlides.push(el);
33 }
34
35 if (index < swiper.loopedSlides) {
36 appendSlides.push(el);
37 }
38 });
39 let list = [...swiper.native.value];
40 let newList = [...list];
41 swiper.originalDataList = [...swiper.native.value];
42 for (let i = 0; i < appendSlides.length; i += 1) {
43 newList.push(list[appendSlides[i].index]);
44 }
45
46 for (let i = prependSlides.length - 1; i >= 0; i -= 1) {
47 newList.unshift(list[prependSlides[i].index]);
48 }
49 swiper.native.$emit("input", newList)
50 return true;
51 }
1 export default function loopDestroy() {
2 const swiper = this;
3 const {
4 $wrapperEl,
5 params,
6 slides
7 } = swiper;
8 }
1 export default function loopFix() {
2 const swiper = this;
3 swiper.emit('beforeLoopFix');
4 const {
5 activeIndex,
6 slides,
7 loopedSlides,
8 allowSlidePrev,
9 allowSlideNext,
10 snapGrid,
11 rtlTranslate: rtl
12 } = swiper;
13 let newIndex;
14 swiper.allowSlidePrev = true;
15 swiper.allowSlideNext = true;
16 const snapTranslate = -snapGrid[activeIndex];
17 const diff = snapTranslate - swiper.getTranslate();
18
19 if (activeIndex < loopedSlides) {
20 newIndex = slides.length - loopedSlides * 3 + activeIndex;
21 newIndex += loopedSlides;
22 const slideChanged = swiper.slideTo(newIndex, 0, false, true);
23
24 if (slideChanged && diff !== 0) {
25 swiper.setTranslate((rtl ? -swiper.translate : swiper.translate) - diff);
26 }
27 } else if (activeIndex >= slides.length - loopedSlides) {
28 newIndex = -slides.length + activeIndex + loopedSlides;
29 newIndex += loopedSlides;
30 const slideChanged = swiper.slideTo(newIndex, 0, false, true);
31
32 if (slideChanged && diff !== 0) {
33 swiper.setTranslate((rtl ? -swiper.translate : swiper.translate) - diff);
34 }
35 }
36
37 swiper.allowSlidePrev = allowSlidePrev;
38 swiper.allowSlideNext = allowSlideNext;
39 swiper.emit('loopFix');
40 }
1 export function ChildrenMixin(parent, options = {}) {
2 const indexKey = options.indexKey || 'index';
3 return {
4 inject: {
5 [parent]: {
6 default: null,
7 },
8 },
9 mounted() {
10 this.parent = this[parent];
11 this.bindRelation();
12 },
13 // #ifdef VUE2
14 beforeDestroy() {
15 if (this.parent) {
16 this.parent.children = this.parent.children.filter(
17 (item) => item !== this
18 );
19 uni.$emit("childrenReady" + this.parent._uid, this);
20 }
21 },
22 // #endif
23 // #ifdef VUE3
24 beforeUnmount() {
25 if (this.parent) {
26 this.parent.children = this.parent.children.filter(
27 (item) => item !== this
28 );
29 uni.$emit("childrenReady" + this.parent._uid, this);
30 }
31 },
32 // #endif
33 methods: {
34 bindRelation() {
35 if (!this.parent || this.parent.children.indexOf(this) !== -1) {
36 return;
37 }
38 const children = [...this.parent.children, this];
39 this.parent.children = children;
40 this.index = this.parent.children.indexOf(this);
41 uni.$emit("childrenReady" + this.parent._uid, this);
42 },
43 },
44 };
45 }
46
47 export function ParentMixin(parent) {
48 return {
49 provide() {
50 return {
51 [parent]: this,
52 };
53 },
54 created() {
55 this.children = [];
56 },
57 // #ifdef VUE2
58 beforeDestroy() {
59 uni.$off("childrenReady" + this._uid)
60 },
61 // #endif
62 // #ifdef VUE3
63 beforeUnmount() {
64 uni.$off("childrenReady" + this._uid)
65 },
66 // #endif
67 };
68 }
1 import {
2 extend
3 } from '../shared/utils.js';
4 export default function moduleExtendParams(params, allModulesParams) {
5 return function extendParams(obj = {}) {
6 const moduleParamName = Object.keys(obj)[0];
7 const moduleParams = obj[moduleParamName];
8
9 if (typeof moduleParams !== 'object' || moduleParams === null) {
10 extend(allModulesParams, obj);
11 return;
12 }
13
14 if (['navigation', 'pagination', 'scrollbar'].indexOf(moduleParamName) >= 0 && params[moduleParamName] ===
15 true) {
16 params[moduleParamName] = {
17 auto: true
18 };
19 }
20
21 if (!(moduleParamName in params && 'enabled' in moduleParams)) {
22 extend(allModulesParams, obj);
23 return;
24 }
25
26 if (params[moduleParamName] === true) {
27 params[moduleParamName] = {
28 enabled: true
29 };
30 }
31
32 if (typeof params[moduleParamName] === 'object' && !('enabled' in params[moduleParamName])) {
33 params[moduleParamName].enabled = true;
34 }
35
36 if (!params[moduleParamName]) params[moduleParamName] = {
37 enabled: false
38 };
39 extend(allModulesParams, obj);
40 };
41 }
1 import slideTo from './slideTo.js';
2 import slideToLoop from './slideToLoop.js';
3 import slideNext from './slideNext.js';
4 import slidePrev from './slidePrev.js';
5 import slideReset from './slideReset.js';
6 import slideToClosest from './slideToClosest.js';
7 import slideToClickedSlide from './slideToClickedSlide.js';
8 export default {
9 slideTo,
10 slideToLoop,
11 slideNext,
12 slidePrev,
13 slideReset,
14 slideToClosest,
15 slideToClickedSlide
16 };
1 export default function slideNext(speed = this.params.speed, runCallbacks = true, internal) {
2 const swiper = this;
3 const {
4 animating,
5 enabled,
6 params
7 } = swiper;
8 if (!enabled) return swiper;
9 let perGroup = params.slidesPerGroup;
10
11 if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
12 perGroup = Math.max(swiper.slidesPerViewDynamic('current', true), 1);
13 }
14
15 const increment = swiper.activeIndex < params.slidesPerGroupSkip ? 1 : perGroup;
16
17 if (params.loop) {
18 if (animating && params.loopPreventsSlide) return false;
19 swiper.loopFix();
20 }
21
22 if (params.rewind && swiper.isEnd) {
23 return swiper.slideTo(0, speed, runCallbacks, internal);
24 }
25 setTimeout(() => {
26 swiper.slideTo(swiper.activeIndex + increment, speed, runCallbacks, internal)
27 }, 0)
28 return true;
29 }
1 export default function slidePrev(speed = this.params.speed, runCallbacks = true, internal) {
2 const swiper = this;
3 const {
4 params,
5 animating,
6 snapGrid,
7 slidesGrid,
8 rtlTranslate,
9 enabled
10 } = swiper;
11 if (!enabled) return swiper;
12
13 if (params.loop) {
14 if (animating && params.loopPreventsSlide) return false;
15 swiper.loopFix();
16
17 }
18
19 const translate = rtlTranslate ? swiper.translate : -swiper.translate;
20
21 function normalize(val) {
22 if (val < 0) return -Math.floor(Math.abs(val));
23 return Math.floor(val);
24 }
25
26 const normalizedTranslate = normalize(translate);
27 const normalizedSnapGrid = snapGrid.map(val => normalize(val));
28 let prevSnap = snapGrid[normalizedSnapGrid.indexOf(normalizedTranslate) - 1];
29
30 if (typeof prevSnap === 'undefined' && params.cssMode) {
31 let prevSnapIndex;
32 snapGrid.forEach((snap, snapIndex) => {
33 if (normalizedTranslate >= snap) {
34 prevSnapIndex = snapIndex;
35 }
36 });
37
38 if (typeof prevSnapIndex !== 'undefined') {
39 prevSnap = snapGrid[prevSnapIndex > 0 ? prevSnapIndex - 1 : prevSnapIndex];
40 }
41 }
42
43 let prevIndex = 0;
44
45 if (typeof prevSnap !== 'undefined') {
46 prevIndex = slidesGrid.indexOf(prevSnap);
47 if (prevIndex < 0) prevIndex = swiper.activeIndex - 1;
48
49 if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
50 prevIndex = prevIndex - swiper.slidesPerViewDynamic('previous', true) + 1;
51 prevIndex = Math.max(prevIndex, 0);
52 }
53 }
54
55 if (params.rewind && swiper.isBeginning) {
56 return swiper.slideTo(swiper.slides.length - 1, speed, runCallbacks, internal);
57 }
58
59 setTimeout(() => {
60 swiper.slideTo(prevIndex, speed, runCallbacks, internal)
61 }, 30)
62 return true;
63 }
1 export default function slideReset(speed = this.params.speed, runCallbacks = true, internal) {
2 const swiper = this;
3 return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);
4 }
...\ No newline at end of file ...\ No newline at end of file
1 import {
2 animateCSSModeScroll
3 } from '../../shared/utils.js';
4 export default function slideTo(index = 0, speed = this.params.speed, runCallbacks = true, internal, initial) {
5 if (typeof index !== 'number' && typeof index !== 'string') {
6 throw new Error(
7 `The 'index' argument cannot have type other than 'number' or 'string'. [${typeof index}] given.`);
8 }
9
10 if (typeof index === 'string') {
11 /**
12 * The `index` argument converted from `string` to `number`.
13 * @type {number}
14 */
15 const indexAsNumber = parseInt(index, 10);
16 /**
17 * Determines whether the `index` argument is a valid `number`
18 * after being converted from the `string` type.
19 * @type {boolean}
20 */
21
22 const isValidNumber = isFinite(indexAsNumber);
23
24 if (!isValidNumber) {
25 throw new Error(`The passed-in 'index' (string) couldn't be converted to 'number'. [${index}] given.`);
26 } // Knowing that the converted `index` is a valid number,
27 // we can update the original argument's value.
28
29
30 index = indexAsNumber;
31 }
32
33 const swiper = this;
34 let slideIndex = index;
35 let timer;
36 if (slideIndex < 0) slideIndex = 0;
37 const {
38 params,
39 snapGrid,
40 slidesGrid,
41 previousIndex,
42 activeIndex,
43 rtlTranslate: rtl,
44 wrapperEl,
45 enabled
46 } = swiper;
47
48 if (swiper.animating && params.preventInteractionOnTransition || !enabled && !internal && !initial) {
49 return false;
50 }
51
52 const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex);
53 let snapIndex = skip + Math.floor((slideIndex - skip) / swiper.params.slidesPerGroup);
54 if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
55
56 if ((activeIndex || params.initialSlide || 0) === (previousIndex || 0) && runCallbacks) {
57 swiper.emit('beforeSlideChangeStart');
58 }
59 const translate = -snapGrid[snapIndex]; // Update progress
60
61 swiper.updateProgress(translate); // Normalize slideIndex
62
63 if (params.normalizeSlideIndex) {
64 for (let i = 0; i < slidesGrid.length; i += 1) {
65 const normalizedTranslate = -Math.floor(translate * 100);
66 const normalizedGrid = Math.floor(slidesGrid[i] * 100);
67 const normalizedGridNext = Math.floor(slidesGrid[i + 1] * 100);
68 if (typeof slidesGrid[i + 1] !== 'undefined') {
69 if (normalizedTranslate >= normalizedGrid && normalizedTranslate < normalizedGridNext - (
70 normalizedGridNext - normalizedGrid) / 2) {
71 slideIndex = i;
72 } else if (normalizedTranslate >= normalizedGrid && normalizedTranslate < normalizedGridNext) {
73 slideIndex = i + 1;
74 }
75 } else if (normalizedTranslate >= normalizedGrid) {
76 slideIndex = i;
77 }
78
79 }
80 } // Directions locks
81
82
83 if (swiper.initialized && slideIndex !== activeIndex) {
84 if (!swiper.allowSlideNext && translate < swiper.translate && translate < swiper.minTranslate()) {
85 return false;
86 }
87
88 if (!swiper.allowSlidePrev && translate > swiper.translate && translate > swiper.maxTranslate()) {
89 if ((activeIndex || 0) !== slideIndex) return false;
90 }
91 }
92
93 let direction;
94 if (slideIndex > activeIndex) direction = 'next';
95 else if (slideIndex < activeIndex) direction = 'prev';
96 else direction = 'reset'; // Update Index
97
98 if (rtl && -translate === swiper.translate || !rtl && translate === swiper.translate) {
99 swiper.updateActiveIndex(slideIndex); // Update Height
100
101 if (params.autoHeight) {
102 setTimeout(() => {
103 swiper.updateAutoHeight();
104 }, 0)
105 }
106
107 swiper.updateSlidesClasses();
108
109 if (params.effect !== 'slide') {
110 swiper.setTranslate(translate);
111 }
112
113 if (direction !== 'reset') {
114 swiper.transitionStart(runCallbacks, direction);
115 swiper.transitionEnd(runCallbacks, direction);
116 }
117
118 return false;
119 }
120
121 if (params.cssMode) {
122 const isH = swiper.isHorizontal();
123 const t = rtl ? translate : -translate;
124
125 if (speed === 0) {
126 const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
127
128 if (isVirtual) {
129 swiper.wrapperEl.style.scrollSnapType = 'none';
130 swiper._immediateVirtual = true;
131 }
132
133 wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;
134
135 if (isVirtual) {
136 requestAnimationFrame(() => {
137 swiper.wrapperEl.style.scrollSnapType = '';
138 swiper._swiperImmediateVirtual = false;
139 });
140 }
141 } else {
142 if (!swiper.support.smoothScroll) {
143 animateCSSModeScroll({
144 swiper,
145 targetPosition: t,
146 side: isH ? 'left' : 'top'
147 });
148 return true;
149 }
150
151 wrapperEl.scrollTo({
152 [isH ? 'left' : 'top']: t,
153 behavior: 'smooth'
154 });
155 }
156
157 return true;
158 }
159 swiper.setTransition(speed);
160 swiper.setTranslate(translate);
161 swiper.updateActiveIndex(slideIndex);
162 swiper.updateSlidesClasses();
163 swiper.emit('beforeTransitionStart', speed, internal);
164 swiper.transitionStart(runCallbacks, direction);
165
166 if (speed === 0) {
167 swiper.transitionEnd(runCallbacks, direction);
168 } else if (!swiper.animating) {
169 swiper.animating = true;
170
171 if (!swiper.onSlideToWrapperTransitionEnd) {
172 swiper.onSlideToWrapperTransitionEnd = function transitionEnd(e) {
173 if (!swiper || swiper.destroyed) return;
174 clearTimeout(timer)
175 swiper.onSlideToWrapperTransitionEnd = null;
176 delete swiper.onSlideToWrapperTransitionEnd;
177 swiper.transitionEnd(runCallbacks, direction);
178 };
179 }
180 timer = setTimeout(() => {
181 if (swiper.onSlideToWrapperTransitionEnd) {
182 swiper.onSlideToWrapperTransitionEnd();
183 }
184 }, speed)
185 }
186
187 return true;
188 }
1 import {
2 nextTick
3 } from '../../shared/utils.js';
4 export default function slideToClickedSlide() {
5 const swiper = this;
6 const {
7 params,
8 $wrapperEl
9 } = swiper;
10 const slidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : params.slidesPerView;
11 let slideToIndex = swiper.clickedIndex;
12 let realIndex;
13
14 if (params.loop) {
15 if (swiper.animating) return;
16 // realIndex = parseInt($(swiper.clickedSlide).attr('data-swiper-slide-index'), 10);
17 realIndex = parseInt(swiper.activeIndex, 10);
18
19 if (params.centeredSlides) {
20 if (slideToIndex < swiper.loopedSlides - slidesPerView / 2 || slideToIndex > swiper.slides.length - swiper
21 .loopedSlides + slidesPerView / 2) {
22 swiper.loopFix();
23 slideToIndex = $wrapperEl.children(
24 `.${params.slideClass}[data-swiper-slide-index="${realIndex}"]:not(.${params.slideDuplicateClass})`
25 ).eq(0).index();
26 nextTick(() => {
27 swiper.slideTo(slideToIndex);
28 });
29 } else {
30 swiper.slideTo(slideToIndex);
31 }
32 } else if (slideToIndex > swiper.slides.length - slidesPerView) {
33 swiper.loopFix();
34 slideToIndex = $wrapperEl.children(
35 `.${params.slideClass}[data-swiper-slide-index="${realIndex}"]:not(.${params.slideDuplicateClass})`)
36 .eq(0).index();
37 nextTick(() => {
38 swiper.slideTo(slideToIndex);
39 });
40 } else {
41 swiper.slideTo(slideToIndex);
42 }
43 } else {
44 swiper.slideTo(slideToIndex);
45 }
46 }
1 /* eslint no-unused-vars: "off" */
2 export default function slideToClosest(speed = this.params.speed, runCallbacks = true, internal, threshold = 0.5) {
3 const swiper = this;
4 let index = swiper.activeIndex;
5 const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
6 const snapIndex = skip + Math.floor((index - skip) / swiper.params.slidesPerGroup);
7 const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;
8
9 if (translate >= swiper.snapGrid[snapIndex]) {
10 const currentSnap = swiper.snapGrid[snapIndex];
11 const nextSnap = swiper.snapGrid[snapIndex + 1];
12
13 if (translate - currentSnap > (nextSnap - currentSnap) * threshold) {
14 index += swiper.params.slidesPerGroup;
15 }
16 } else {
17 const prevSnap = swiper.snapGrid[snapIndex - 1];
18 const currentSnap = swiper.snapGrid[snapIndex];
19
20 if (translate - prevSnap <= (currentSnap - prevSnap) * threshold) {
21 index -= swiper.params.slidesPerGroup;
22 }
23 }
24
25 index = Math.max(index, 0);
26 index = Math.min(index, swiper.slidesGrid.length - 1);
27 return swiper.slideTo(index, speed, runCallbacks, internal);
28 }
...\ No newline at end of file ...\ No newline at end of file
1 export default function slideToLoop(index = 0, speed = this.params.speed, runCallbacks = true, internal) {
2 const swiper = this;
3 let newIndex = index;
4
5 if (swiper.params.loop) {
6 newIndex += swiper.loopedSlides;
7 }
8
9 return swiper.slideTo(newIndex, speed, runCallbacks, internal);
10 }
...\ No newline at end of file ...\ No newline at end of file
1 import setTransition from './setTransition.js';
2 import transitionStart from './transitionStart.js';
3 import transitionEnd from './transitionEnd.js';
4 export default {
5 setTransition,
6 transitionStart,
7 transitionEnd
8 };
1 export default function setTransition(duration, byController) {
2 const swiper = this;
3 if (!swiper.$wrapperEl) return
4 if (!swiper.params.cssMode) {
5 swiper.$wrapperEl.transition(duration);
6 }
7
8 swiper.emit('setTransition', duration, byController);
9 }
1 export default function transitionEmit({
2 swiper,
3 runCallbacks,
4 direction,
5 step
6 }) {
7 const {
8 activeIndex,
9 previousIndex
10 } = swiper;
11 let dir = direction;
12
13 if (!dir) {
14 if (activeIndex > previousIndex) dir = 'next';
15 else if (activeIndex < previousIndex) dir = 'prev';
16 else dir = 'reset';
17 }
18
19 swiper.emit(`transition${step}`);
20
21 if (runCallbacks && activeIndex !== previousIndex) {
22 if (dir === 'reset') {
23 swiper.emit(`slideResetTransition${step}`);
24 return;
25 }
26
27 swiper.emit(`slideChangeTransition${step}`);
28
29 if (dir === 'next') {
30 swiper.emit(`slideNextTransition${step}`);
31 } else {
32 swiper.emit(`slidePrevTransition${step}`);
33 }
34 }
35 }
1 import transitionEmit from './transitionEmit.js';
2 export default function transitionEnd(runCallbacks = true, direction) {
3 const swiper = this;
4 const {
5 params
6 } = swiper;
7 swiper.animating = false;
8 if (params.cssMode) return;
9 swiper.setTransition(0);
10 transitionEmit({
11 swiper,
12 runCallbacks,
13 direction,
14 step: 'End'
15 });
16 }
1 import transitionEmit from './transitionEmit.js';
2 export default function transitionStart(runCallbacks = true, direction) {
3 const swiper = this;
4 const {
5 params
6 } = swiper;
7 if (params.cssMode) return;
8
9 if (params.autoHeight) {
10 swiper.updateAutoHeight();
11 }
12
13 transitionEmit({
14 swiper,
15 runCallbacks,
16 direction,
17 step: 'Start'
18 });
19 }
1 import {
2 getTranslate
3 } from '../../shared/utils.js';
4 export default function getSwiperTranslate(axis = this.isHorizontal() ? 'x' : 'y') {
5 const swiper = this;
6 const {
7 params,
8 rtlTranslate: rtl,
9 translate,
10 $wrapperEl
11 } = swiper;
12
13 if (params.virtualTranslate) {
14 return rtl ? -translate : translate;
15 }
16
17 if (params.cssMode) {
18 return translate;
19 }
20 let currentTranslate = getTranslate(swiper, axis);
21 if (rtl) currentTranslate = -currentTranslate;
22 return currentTranslate || 0;
23 }
1 import getTranslate from './getTranslate.js';
2 import setTranslate from './setTranslate.js';
3 import minTranslate from './minTranslate.js';
4 import maxTranslate from './maxTranslate.js';
5 import translateTo from './translateTo.js';
6 export default {
7 getTranslate,
8 setTranslate,
9 minTranslate,
10 maxTranslate,
11 translateTo
12 };
...\ No newline at end of file ...\ No newline at end of file
1 export default function maxTranslate() {
2 return -this.snapGrid[this.snapGrid.length - 1];
3 }
...\ No newline at end of file ...\ No newline at end of file
1 export default function minTranslate() {
2 return -this.snapGrid[0];
3 }
...\ No newline at end of file ...\ No newline at end of file
1 export default function setTranslate(translate, byController) {
2 const swiper = this;
3 const {
4 rtlTranslate: rtl,
5 params,
6 $wrapperEl,
7 wrapperEl,
8 progress
9 } = swiper;
10 let x = 0;
11 let y = 0;
12 const z = 0;
13 if (isNaN(translate)) {
14 return
15 }
16 if (!$wrapperEl) return
17 if (swiper.isHorizontal()) {
18 x = rtl ? -translate : translate;
19 } else {
20 y = translate;
21 }
22
23 if (params.roundLengths) {
24 x = Math.floor(x);
25 y = Math.floor(y);
26 }
27
28 if (params.cssMode) {
29 wrapperEl[swiper.isHorizontal() ? 'scrollLeft' : 'scrollTop'] = swiper.isHorizontal() ? -x : -y;
30 } else if (!params.virtualTranslate) {
31 $wrapperEl.transform(`translate3d(${x}px, ${y}px, ${z}px)`);
32 }
33
34 swiper.previousTranslate = swiper.translate;
35 swiper.translate = swiper.isHorizontal() ? x : y; // Check if we need to update progress
36
37 let newProgress;
38 const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();
39
40 if (translatesDiff === 0) {
41 newProgress = 0;
42 } else {
43 newProgress = (translate - swiper.minTranslate()) / translatesDiff;
44 }
45
46 if (newProgress !== progress) {
47 swiper.updateProgress(translate);
48 }
49
50 swiper.emit('setTranslate', swiper.translate, byController);
51 }
1 import {
2 animateCSSModeScroll
3 } from '../../shared/utils.js';
4 export default function translateTo(translate = 0, speed = this.params.speed, runCallbacks = true, translateBounds =
5 true, internal) {
6 const swiper = this;
7 let timer;
8 const {
9 params,
10 wrapperEl
11 } = swiper;
12
13 if (swiper.animating && params.preventInteractionOnTransition) {
14 return false;
15 }
16
17 const minTranslate = swiper.minTranslate();
18 const maxTranslate = swiper.maxTranslate();
19 let newTranslate;
20 if (translateBounds && translate > minTranslate) newTranslate = minTranslate;
21 else if (translateBounds && translate < maxTranslate) newTranslate = maxTranslate;
22 else newTranslate = translate; // Update progress
23
24 swiper.updateProgress(newTranslate);
25
26 if (params.cssMode) {
27 const isH = swiper.isHorizontal();
28
29 if (speed === 0) {
30 wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = -newTranslate;
31 } else {
32 if (!swiper.support.smoothScroll) {
33 animateCSSModeScroll({
34 swiper,
35 targetPosition: -newTranslate,
36 side: isH ? 'left' : 'top'
37 });
38 return true;
39 }
40
41 wrapperEl.scrollTo({
42 [isH ? 'left' : 'top']: -newTranslate,
43 behavior: 'smooth'
44 });
45 }
46
47 return true;
48 }
49
50 if (speed === 0) {
51 swiper.setTransition(0);
52 swiper.setTranslate(newTranslate);
53
54 if (runCallbacks) {
55 swiper.emit('beforeTransitionStart', speed, internal);
56 swiper.emit('transitionEnd');
57 }
58 } else {
59 swiper.setTransition(speed);
60 swiper.setTranslate(newTranslate);
61
62 if (runCallbacks) {
63 swiper.emit('beforeTransitionStart', speed, internal);
64 swiper.emit('transitionStart');
65 }
66
67 if (!swiper.animating) {
68 swiper.animating = true;
69
70 if (!swiper.onTranslateToWrapperTransitionEnd) {
71 swiper.onTranslateToWrapperTransitionEnd = function transitionEnd(e) {
72 if (!swiper || swiper.destroyed) return;
73 if (e.target !== this) return;
74 clearTimeout(timer)
75 swiper.onTranslateToWrapperTransitionEnd = null;
76 delete swiper.onTranslateToWrapperTransitionEnd;
77
78 if (runCallbacks) {
79 swiper.emit('transitionEnd');
80 }
81 };
82 }
83 timer = setTimeout(() => {
84 swiper.onTranslateToWrapperTransitionEnd();
85 }, speed)
86 }
87 }
88
89 return true;
90 }
1 import updateSize from './updateSize.js';
2 import updateSlides from './updateSlides.js';
3 import updateAutoHeight from './updateAutoHeight.js';
4 import updateSlidesOffset from './updateSlidesOffset.js';
5 import updateSlidesProgress from './updateSlidesProgress.js';
6 import updateProgress from './updateProgress.js';
7 import updateSlidesClasses from './updateSlidesClasses.js';
8 import updateActiveIndex from './updateActiveIndex.js';
9 import updateClickedSlide from './updateClickedSlide.js';
10 export default {
11 updateSize,
12 updateSlides,
13 updateAutoHeight,
14 updateSlidesOffset,
15 updateSlidesProgress,
16 updateProgress,
17 updateSlidesClasses,
18 updateActiveIndex,
19 updateClickedSlide
20 };
1 export default function updateActiveIndex(newActiveIndex) {
2 const swiper = this;
3 const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;
4 const {
5 slidesGrid,
6 snapGrid,
7 params,
8 activeIndex: previousIndex,
9 realIndex: previousRealIndex,
10 snapIndex: previousSnapIndex
11 } = swiper;
12 let activeIndex = newActiveIndex;
13 let snapIndex;
14
15 if (typeof activeIndex === 'undefined') {
16 for (let i = 0; i < slidesGrid.length; i += 1) {
17 if (typeof slidesGrid[i + 1] !== 'undefined') {
18 if (translate >= slidesGrid[i] && translate < slidesGrid[i + 1] - (slidesGrid[i + 1] - slidesGrid[i]) /
19 2) {
20 activeIndex = i;
21 } else if (translate >= slidesGrid[i] && translate < slidesGrid[i + 1]) {
22 activeIndex = i + 1;
23 }
24 } else if (translate >= slidesGrid[i]) {
25 activeIndex = i;
26 }
27 } // Normalize slideIndex
28
29
30 if (params.normalizeSlideIndex) {
31 if (activeIndex < 0 || typeof activeIndex === 'undefined') activeIndex = 0;
32 }
33
34 }
35
36 if (snapGrid.indexOf(translate) >= 0) {
37 snapIndex = snapGrid.indexOf(translate);
38 } else {
39 const skip = Math.min(params.slidesPerGroupSkip, activeIndex);
40 snapIndex = skip + Math.floor((activeIndex - skip) / params.slidesPerGroup);
41 }
42
43 if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
44
45
46
47 if (swiper.loopedSlides) {
48 swiper.slides.filter((item) => item.index >= swiper.loopedSlides && item.index < swiper.slides.length - swiper
49 .loopedSlides).forEach((item, index) => {
50 item.dataSwiperSlideIndex = item.index - swiper.loopedSlides;
51 })
52 swiper.slides.filter((item) => item.index < swiper.loopedSlides).forEach((item, index) => {
53 if (swiper.slides[swiper.slides.length - swiper.loopedSlides * 3 + index]) {
54 item.dataSwiperSlideIndex = swiper.slides[swiper.slides.length - swiper.loopedSlides * 3 +
55 index]
56 .index;
57 }
58 })
59 swiper.slides.filter((item) => item.index >= swiper.slides.length - swiper
60 .loopedSlides).forEach((item, index) => {
61 item.dataSwiperSlideIndex = swiper.slides[index].index;
62 })
63 }
64
65
66 if (activeIndex === previousIndex) {
67 if (snapIndex !== previousSnapIndex) {
68 swiper.snapIndex = snapIndex;
69 swiper.emit('snapIndexChange');
70 }
71
72 return;
73 } // Get real index
74
75 let realIndex;
76 if (swiper.virtual && params.virtual.enabled) {
77 realIndex = activeIndex;
78 } else {
79 if (swiper.slides[activeIndex].dataSwiperSlideIndex == undefined || swiper.slides[activeIndex]
80 .dataSwiperSlideIndex == null) {
81 realIndex = activeIndex;
82 } else {
83 realIndex = swiper.slides[activeIndex].dataSwiperSlideIndex;
84 }
85 }
86 Object.assign(swiper, {
87 snapIndex,
88 realIndex,
89 previousIndex,
90 activeIndex
91 });
92 swiper.emit('activeIndexChange');
93 swiper.emit('snapIndexChange');
94
95 if (previousRealIndex !== realIndex) {
96 swiper.emit('realIndexChange');
97 }
98
99 if (swiper.initialized || swiper.params.runCallbacksOnInit) {
100 swiper.emit('slideChange', activeIndex);
101 }
102 }
1 export default async function updateAutoHeight(speed) {
2 const swiper = this;
3 const activeSlides = [];
4 const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
5 let newHeight = 0;
6 let i;
7
8 if (typeof speed === 'number') {
9 swiper.setTransition(speed);
10 } else if (speed === true) {
11 swiper.setTransition(swiper.params.speed);
12 }
13
14 const getSlideByIndex = index => {
15 if (isVirtual) {
16 return swiper.slides.filter(el => parseInt(el.getAttribute('data-swiper-slide-index'), 10) ===
17 index)[
18 0];
19 }
20
21 return swiper.slides[index];
22 }; // Find slides currently in view
23
24 if (swiper.params.slidesPerView !== 'auto' && swiper.params.slidesPerView > 1) {
25 if (swiper.params.centeredSlides) {
26 swiper.visibleSlides.each(slide => {
27 activeSlides.push(slide);
28 });
29 } else {
30 for (i = 0; i < Math.ceil(swiper.params.slidesPerView); i += 1) {
31 const index = swiper.activeIndex + i;
32 if (index > swiper.slides.length && !isVirtual) break;
33 activeSlides.push(getSlideByIndex(index));
34 }
35 }
36 } else {
37 activeSlides.push(getSlideByIndex(swiper.activeIndex));
38 } // Find new height from highest slide in view
39
40
41 for (i = 0; i < activeSlides.length; i += 1) {
42 if (typeof activeSlides[i] !== 'undefined') {
43 const size = await activeSlides[i].getSize();
44 const height = size.height;
45 newHeight = height > newHeight ? height : newHeight;
46 }
47 } // Update Height
48
49
50 if (newHeight || newHeight === 0) swiper.$wrapperEl.css({
51 height: `${newHeight?newHeight:''}px`
52 });
53 }
1 export default function updateClickedSlide(e) {
2 const swiper = this;
3 const params = swiper.params;
4 const slide = swiper.slides[e];
5 let slideFound = false;
6 let slideIndex;
7
8 if (slide) {
9 for (let i = 0; i < swiper.slides.length; i += 1) {
10 if (swiper.slides[i] === slide) {
11 slideFound = true;
12 slideIndex = i;
13 break;
14 }
15 }
16 }
17
18 if (slide && slideFound) {
19 swiper.clickedSlide = slide;
20
21 if (swiper.virtual && swiper.params.virtual.enabled) {
22 swiper.clickedIndex = parseInt($(slide).attr('data-swiper-slide-index'), 10);
23 } else {
24 swiper.clickedIndex = slideIndex;
25 }
26 } else {
27 swiper.clickedSlide = undefined;
28 swiper.clickedIndex = undefined;
29 return;
30 }
31
32 if (params.slideToClickedSlide && swiper.clickedIndex !== undefined && swiper.clickedIndex !== swiper.activeIndex) {
33 swiper.slideToClickedSlide();
34 }
35 }
1 export default function updateProgress(translate) {
2 const swiper = this;
3
4 if (typeof translate === 'undefined') {
5 const multiplier = swiper.rtlTranslate ? -1 : 1; // eslint-disable-next-line
6
7 translate = swiper && swiper.translate && swiper.translate * multiplier || 0;
8 }
9
10 const params = swiper.params;
11 const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();
12 let {
13 progress,
14 isBeginning,
15 isEnd
16 } = swiper;
17 const wasBeginning = isBeginning;
18 const wasEnd = isEnd;
19
20 if (translatesDiff === 0) {
21 progress = 0;
22 isBeginning = true;
23 isEnd = true;
24 } else {
25 progress = (translate - swiper.minTranslate()) / translatesDiff;
26 isBeginning = progress <= 0;
27 isEnd = progress >= 1;
28 }
29
30 Object.assign(swiper, {
31 progress,
32 isBeginning,
33 isEnd
34 });
35 if (params.watchSlidesProgress || params.centeredSlides && params.autoHeight) swiper.updateSlidesProgress(translate);
36
37 if (isBeginning && !wasBeginning) {
38 swiper.emit('reachBeginning toEdge');
39 }
40
41 if (isEnd && !wasEnd) {
42 swiper.emit('reachEnd toEdge');
43 }
44
45 if (wasBeginning && !isBeginning || wasEnd && !isEnd) {
46 swiper.emit('fromEdge');
47 }
48
49 swiper.emit('progress', progress);
50 }
...\ No newline at end of file ...\ No newline at end of file
1 export default function updateSize() {
2 const swiper = this;
3 let width;
4 let height;
5 const el = swiper.el;
6 if (typeof swiper.params.width !== 'undefined' && swiper.params.width !== null) {
7 width = swiper.params.width;
8 } else {
9 width = el.width;
10 }
11
12 if (typeof swiper.params.height !== 'undefined' && swiper.params.height !== null) {
13 height = swiper.params.height;
14 } else {
15 height = el.height;
16 }
17
18 if (width === 0 && swiper.isHorizontal() || height === 0 && swiper.isVertical()) {
19 return;
20 } // Subtract paddings
21 if (Number.isNaN(width)) width = 0;
22 if (Number.isNaN(height)) height = 0;
23 Object.assign(swiper, {
24 width,
25 height,
26 size: swiper.isHorizontal() ? width : height
27 });
28 }
1 import {
2 setCSSProperty
3 } from '../../shared/utils.js';
4 export default function updateSlides() {
5 const swiper = this;
6
7 function getDirectionLabel(property) {
8 if (swiper.isHorizontal()) {
9 return property;
10 } // prettier-ignore
11
12
13 return {
14 'width': 'height',
15 'margin-top': 'margin-left',
16 'margin-bottom ': 'margin-right',
17 'margin-left': 'margin-top',
18 'margin-right': 'margin-bottom',
19 'padding-left': 'padding-top',
20 'padding-right': 'padding-bottom',
21 'marginRight': 'marginBottom'
22 } [property];
23 }
24
25 function getDirectionPropertyValue(node, label) {
26 return parseFloat(node[getDirectionLabel(label)] || 0);
27 }
28
29 function getComputedStyle(native) {
30 return native.itemStyle;
31 }
32 const params = swiper.params;
33 const {
34 $wrapperEl,
35 size: swiperSize,
36 rtlTranslate: rtl,
37 wrongRTL
38 } = swiper;
39 const isVirtual = swiper.virtual && params.virtual.enabled;
40 const previousSlidesLength = isVirtual ? swiper.virtual.slides.length : swiper.slides.length;
41 // const slides = $wrapperEl.children(`.${swiper.params.slideClass}`);
42 const slides = swiper.slides;
43 const slidesLength = isVirtual ? swiper.virtual.slides.length : slides.length;
44 let snapGrid = [];
45 const slidesGrid = [];
46 const slidesSizesGrid = [];
47 let offsetBefore = params.slidesOffsetBefore;
48
49 if (typeof offsetBefore === 'function') {
50 offsetBefore = params.slidesOffsetBefore.call(swiper);
51 }
52
53 let offsetAfter = params.slidesOffsetAfter;
54
55 if (typeof offsetAfter === 'function') {
56 offsetAfter = params.slidesOffsetAfter.call(swiper);
57 }
58
59 const previousSnapGridLength = swiper.snapGrid.length;
60 const previousSlidesGridLength = swiper.slidesGrid.length;
61 let spaceBetween = params.spaceBetween;
62 let slidePosition = -offsetBefore;
63 let prevSlideSize = 0;
64 let index = 0;
65
66 if (typeof swiperSize === 'undefined') {
67 return;
68 }
69
70 if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
71 spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiperSize;
72 }
73
74 swiper.virtualSize = -spaceBetween; // reset margins
75
76 if (params.centeredSlides && params.cssMode) {
77 setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-before', '');
78 setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-after', '');
79 }
80
81 const gridEnabled = params.grid && params.grid.rows > 1 && swiper.grid;
82
83 if (gridEnabled) {
84 swiper.grid.initSlides(slidesLength);
85 }
86
87
88 let slideSize;
89 const shouldResetSlideSize = params.slidesPerView === 'auto' && params.breakpoints && Object.keys(params
90 .breakpoints).filter(key => {
91 return typeof params.breakpoints[key].slidesPerView !== 'undefined';
92 }).length > 0;
93 Array(...Array(slidesLength)).forEach(async (item, i) => {
94 slideSize = 0;
95 const slide = slides[i];
96
97 if (gridEnabled) {
98 swiper.grid.updateSlide(i, slide, slidesLength, getDirectionLabel);
99 }
100 if (params.slidesPerView === 'auto') {
101 if (shouldResetSlideSize) {
102 slides[i].style[getDirectionLabel('width')] = ``;
103 }
104
105 const slideStyles = getComputedStyle(slide);
106 const currentTransform = slide.itemStyle.transform;
107 const currentWebKitTransform = slide.itemStyle.webkitTransform;
108
109 if (currentTransform) {
110 slide.itemStyle.transform = 'none';
111 }
112
113 if (currentWebKitTransform) {
114 slide.itemStyle.webkitTransform = 'none';
115 }
116
117 if (params.roundLengths) {
118 slideSize = swiper.isHorizontal() ? slide.outerWidth(true) : slide.outerHeight(true);
119 } else {
120 const width = swiper.isHorizontal() ? slide.width : slide.height;
121 const paddingLeft = getDirectionPropertyValue(slideStyles, 'padding-left');
122 const paddingRight = getDirectionPropertyValue(slideStyles, 'padding-right');
123 const marginLeft = getDirectionPropertyValue(slideStyles, 'margin-left');
124 const marginRight = getDirectionPropertyValue(slideStyles, 'margin-right');
125 const boxSizing = slideStyles['box-sizing'];
126
127 if (boxSizing && boxSizing === 'border-box') {
128 slideSize = width + marginLeft + marginRight;
129 } else {
130 // slideSize = width + paddingLeft + paddingRight + marginLeft + marginRight;
131 slideSize = width;
132 }
133 }
134
135 if (currentTransform) {
136 slide.itemStyle.transform = currentTransform;
137 }
138
139 if (currentWebKitTransform) {
140 slide.itemStyle.webkitTransform = currentWebKitTransform;
141 }
142
143 if (params.roundLengths) slideSize = Math.floor(slideSize);
144 } else {
145 slideSize = (swiperSize - (params.slidesPerView - 1) * spaceBetween) / params.slidesPerView;
146 if (params.roundLengths) slideSize = Math.floor(slideSize);
147 slides[i] && slides[i].css({
148 [getDirectionLabel('width')]: `${slideSize}px`
149 })
150 }
151
152 if (slides[i]) {
153 slides[i].swiperSlideSize = slideSize;
154 }
155
156 if (params.autoHeight) {
157 slides[i] && slides[i].css({
158 height: 'auto'
159 })
160 }
161
162 slidesSizesGrid.push(slideSize);
163
164 if (params.centeredSlides) {
165 slidePosition = slidePosition + slideSize / 2 + prevSlideSize / 2 + spaceBetween;
166 if (prevSlideSize === 0 && i !== 0) slidePosition = slidePosition - swiperSize / 2 -
167 spaceBetween;
168 if (i === 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween;
169 if (Math.abs(slidePosition) < 1 / 1000) slidePosition = 0;
170 if (params.roundLengths) slidePosition = Math.floor(slidePosition);
171 if (index % params.slidesPerGroup === 0) snapGrid.push(slidePosition);
172 slidesGrid.push(slidePosition);
173 } else {
174 if (params.roundLengths) slidePosition = Math.floor(slidePosition);
175 if ((index - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params
176 .slidesPerGroup === 0)
177 snapGrid.push(slidePosition);
178 slidesGrid.push(slidePosition);
179 slidePosition = slidePosition + slideSize + spaceBetween;
180 }
181 swiper.virtualSize += slideSize + spaceBetween;
182 prevSlideSize = slideSize;
183 index += 1;
184 })
185 swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter;
186
187 if (rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {
188 $wrapperEl.css({
189 width: `${swiper.virtualSize + params.spaceBetween}px`
190 });
191 }
192
193 if (params.setWrapperSize) {
194 $wrapperEl.css({
195 [getDirectionLabel('width')]: `${swiper.virtualSize + params.spaceBetween}px`
196 });
197 }
198
199 if (gridEnabled) {
200 swiper.grid.updateWrapperSize(slideSize, snapGrid, getDirectionLabel);
201 } // Remove last grid elements depending on width
202
203
204 if (!params.centeredSlides) {
205 const newSlidesGrid = [];
206
207 for (let i = 0; i < snapGrid.length; i += 1) {
208 let slidesGridItem = snapGrid[i];
209 if (params.roundLengths) slidesGridItem = Math.floor(slidesGridItem);
210
211 if (snapGrid[i] <= swiper.virtualSize - swiperSize) {
212 newSlidesGrid.push(slidesGridItem);
213 }
214 }
215 snapGrid = newSlidesGrid;
216
217 if (Math.floor(swiper.virtualSize - swiperSize) - Math.floor(snapGrid[snapGrid.length - 1]) > 1) {
218 snapGrid.push(swiper.virtualSize - swiperSize);
219 }
220 }
221
222 if (snapGrid.length === 0) snapGrid = [0];
223
224 if (params.spaceBetween !== 0) {
225 // #ifdef MP-BAIDU
226 const key = swiper.isHorizontal() && rtl ? 'marginLeft' : getDirectionLabel('marginRight');
227 // #endif
228 // #ifndef MP-BAIDU
229 const key = swiper.isHorizontal() && rtl ? 'margin-left' : getDirectionLabel('margin-right');
230 // #endif
231 slides.filter((_, slideIndex) => {
232 if (!params.cssMode) return true;
233
234 if (slideIndex === slides.length - 1) {
235 return false;
236 }
237
238 return true;
239 }).forEach((item) => {
240 item.css({
241 [key]: `${spaceBetween}px`
242 })
243 });
244 }
245 if (params.centeredSlides && params.centeredSlidesBounds) {
246 let allSlidesSize = 0;
247 slidesSizesGrid.forEach(slideSizeValue => {
248 allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
249 });
250 allSlidesSize -= params.spaceBetween;
251 const maxSnap = allSlidesSize - swiperSize;
252 snapGrid = snapGrid.map(snap => {
253 if (snap < 0) return -offsetBefore;
254 if (snap > maxSnap) return maxSnap + offsetAfter;
255 return snap;
256 });
257 }
258
259 if (params.centerInsufficientSlides) {
260 let allSlidesSize = 0;
261 slidesSizesGrid.forEach(slideSizeValue => {
262 allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
263 });
264 allSlidesSize -= params.spaceBetween;
265
266 if (allSlidesSize < swiperSize) {
267 const allSlidesOffset = (swiperSize - allSlidesSize) / 2;
268 snapGrid.forEach((snap, snapIndex) => {
269 snapGrid[snapIndex] = snap - allSlidesOffset;
270 });
271 slidesGrid.forEach((snap, snapIndex) => {
272 slidesGrid[snapIndex] = snap + allSlidesOffset;
273 });
274 }
275 }
276 Object.assign(swiper, {
277 slides,
278 snapGrid,
279 slidesGrid,
280 slidesSizesGrid
281 });
282
283 if (params.centeredSlides && params.cssMode && !params.centeredSlidesBounds) {
284 setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-before', `${-snapGrid[0]}px`);
285 setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-after',
286 `${swiper.size / 2 - slidesSizesGrid[slidesSizesGrid.length - 1] / 2}px`);
287 const addToSnapGrid = -swiper.snapGrid[0];
288 const addToSlidesGrid = -swiper.slidesGrid[0];
289 swiper.snapGrid = swiper.snapGrid.map(v => v + addToSnapGrid);
290 swiper.slidesGrid = swiper.slidesGrid.map(v => v + addToSlidesGrid);
291 }
292
293 if (slidesLength !== previousSlidesLength) {
294 swiper.emit('slidesLengthChange');
295 }
296
297 if (snapGrid.length !== previousSnapGridLength) {
298 if (swiper.params.watchOverflow) swiper.checkOverflow();
299 swiper.emit('snapGridLengthChange');
300 }
301
302 if (slidesGrid.length !== previousSlidesGridLength) {
303 swiper.emit('slidesGridLengthChange');
304 }
305
306 if (params.watchSlidesProgress) {
307 swiper.updateSlidesOffset();
308 }
309
310 return slides;
311 }
1 export default function updateSlidesClasses() {
2 const swiper = this;
3 const {
4 slides,
5 params,
6 $wrapperEl,
7 activeIndex,
8 realIndex
9 } = swiper;
10 if (!slides.length || !$wrapperEl) return;
11 const isVirtual = swiper.virtual && params.virtual.enabled;
12 for (var i = 0; i < slides.length; i++) {
13 slides[i].removeClass(
14 `${params.slideActiveClass} ${params.slideNextClass} ${params.slidePrevClass} ${params.slideDuplicateActiveClass} ${params.slideDuplicateNextClass} ${params.slideDuplicatePrevClass}`
15 );
16 }
17
18 let activeSlide;
19
20 if (isVirtual) {
21 // activeSlide = swiper.$wrapperEl.find(`.${params.slideClass}[data-swiper-slide-index="${activeIndex}"]`);
22 activeSlide = slides[slides.findIndex((item) => {
23 return item.dataSwiperSlideIndex == activeIndex
24 })];
25 } else {
26 activeSlide = slides[activeIndex];
27 } // Active classes
28
29 if (!activeSlide) return
30 activeSlide.addClass(params.slideActiveClass);
31
32 if (params.loop) {
33 if (activeSlide.hasClass(params.slideDuplicateClass)) {
34 // $wrapperEl.children[realIndex].addClass(params.slideDuplicateActiveClass);
35 let index = slides.findIndex((item) => {
36 return !item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == realIndex
37 })
38 slides[index] && slides[index].addClass(params.slideDuplicateActiveClass);
39 } else {
40 // $wrapperEl.children[realIndex].addClass(params.slideDuplicateActiveClass);
41 let index = slides.findIndex((item) => {
42 return item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == realIndex
43 })
44 slides[index] && slides[index].addClass(params.slideDuplicateActiveClass);
45 }
46 } // Next Slide
47
48
49 let nextSlide = activeSlide.nextAll(`.${params.slideClass}`)[0];
50 if (nextSlide) {
51 nextSlide.addClass(params.slideNextClass);
52 } else {
53 if (params.loop && !nextSlide) {
54 nextSlide = slides[0];
55 nextSlide.addClass(params.slideNextClass);
56 } // Prev Slide
57 }
58
59
60
61 let prevSlide = activeSlide.prevAll(`.${params.slideClass}`)[0];
62 if (prevSlide) {
63 prevSlide.addClass(params.slidePrevClass);
64 } else {
65 if (params.loop && !prevSlide) {
66 prevSlide = slides[slides.length - 1];
67 prevSlide.addClass(params.slidePrevClass);
68 }
69 }
70
71
72 if (params.loop) {
73 // Duplicate to all looped slides
74 if (nextSlide.hasClass(params.slideDuplicateClass)) {
75 // $wrapperEl.children(
76 // nextSlide.dataSwiperSlideIndex
77 // ).addClass(params.slideDuplicateNextClass);
78
79 let index = slides.findIndex((item) => {
80 return !item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == nextSlide
81 .dataSwiperSlideIndex
82 })
83 slides[index] && slides[index].addClass(params.slideDuplicateNextClass);
84
85
86 } else {
87 // $wrapperEl.children(
88 // nextSlide.dataSwiperSlideIndex
89 // ).addClass(params.slideDuplicateNextClass);
90
91 let index = slides.findIndex((item) => {
92 return item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == nextSlide
93 .dataSwiperSlideIndex
94 })
95 slides[index] && slides[index].addClass(params.slideDuplicateNextClass);
96 }
97 if (prevSlide.hasClass(params.slideDuplicateClass)) {
98 // $wrapperEl.children(
99 // prevSlide.dataSwiperSlideIndex
100 // ).addClass(params.slideDuplicatePrevClass);
101 let index = slides.findIndex((item) => {
102 return !item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == prevSlide
103 .dataSwiperSlideIndex
104 })
105 slides[index] && slides[index].addClass(params.slideDuplicatePrevClass);
106 } else {
107 // $wrapperEl.children(
108 // prevSlide.dataSwiperSlideIndex
109 // ).addClass(params.slideDuplicatePrevClass);
110 let index = slides.findIndex((item) => {
111 return item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == prevSlide
112 .dataSwiperSlideIndex
113 })
114 slides[index] && slides[index].addClass(params.slideDuplicatePrevClass);
115 }
116 }
117
118 swiper.emitSlidesClasses();
119 }
1 export default async function updateSlidesOffset() {
2 const swiper = this;
3 const slides = swiper.slides;
4
5 for (let i = 0; i < slides.length; i += 1) {
6 let offset = (slides[i].swiperSlideSize + swiper.params.spaceBetween) * slides[i].index;
7 slides[i].swiperSlideOffset = swiper.isHorizontal() ? offset :
8 offset;
9 }
10
11 }
1 export default function updateSlidesProgress(translate = this && this.translate || 0) {
2 const swiper = this;
3 const params = swiper.params;
4 const {
5 slides,
6 rtlTranslate: rtl,
7 snapGrid
8 } = swiper;
9 if (slides.length === 0) return;
10 if (typeof slides[0].swiperSlideOffset === 'undefined' || typeof slides[slides.length - 1].swiperSlideOffset ===
11 'undefined') swiper
12 .updateSlidesOffset();
13 let offsetCenter = -translate;
14 if (rtl) offsetCenter = translate; // Visible Slides
15
16 swiper.visibleSlidesIndexes = [];
17 swiper.visibleSlides = [];
18
19 // slides.forEach((item)=>)
20
21 for (let i = 0; i < slides.length; i += 1) {
22 const slide = slides[i];
23 let slideOffset = slide.swiperSlideOffset;
24 if (params.cssMode && params.centeredSlides) {
25 slideOffset -= slides[0].swiperSlideOffset;
26 }
27
28 const slideProgress = (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (
29 slide.swiperSlideSize + params.spaceBetween);
30 const originalSlideProgress = (offsetCenter - snapGrid[0] + (params.centeredSlides ? swiper.minTranslate() :
31 0) - slideOffset) / (slide.swiperSlideSize + params.spaceBetween);
32 const slideBefore = -(offsetCenter - slideOffset);
33 const slideAfter = slideBefore + swiper.slidesSizesGrid[i];
34 const isVisible = slideBefore >= 0 && slideBefore < swiper.size - 1 || slideAfter > 1 && slideAfter <= swiper
35 .size || slideBefore <= 0 && slideAfter >= swiper.size;
36 if (isVisible) {
37 swiper.visibleSlides.push(slide);
38 swiper.visibleSlidesIndexes.push(i);
39 slides[i].addClass(params.slideVisibleClass);
40 }
41
42 slide.progress = rtl ? -slideProgress : slideProgress;
43 slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress;
44 }
45 }
1 export function getAllRect(context, selector) {
2 return new Promise((resolve) => {
3 uni.createSelectorQuery()
4 .in(context)
5 .selectAll(selector)
6 .boundingClientRect()
7 .exec((rect = []) => resolve(rect[0]));
8 });
9 }
10
11 export function getRect(context, selector) {
12 return new Promise((resolve) => {
13 uni.createSelectorQuery()
14 .in(context)
15 .select(selector)
16 .boundingClientRect()
17 .exec((rect = []) => resolve(rect[0]));
18 });
19 }
20
21 export function requestAnimationFrame(cb) {
22 const systemInfo = uni.getSystemInfoSync();
23 if (systemInfo.platform === 'devtools') {
24 return setTimeout(() => {
25 cb();
26 }, 1000 / 30);
27 }
28 return uni
29 .createSelectorQuery()
30 .selectViewport()
31 .boundingClientRect()
32 .exec(() => {
33 cb();
34 });
35 }
1 import {
2 paramsList
3 } from './params-list.js';
4 import {
5 isObject
6 } from './utils.js';
7
8 function getChangedParams(swiperParams, oldParams, children, oldChildren) {
9 const keys = [];
10 if (!oldParams) return keys;
11 const addKey = (key) => {
12 if (keys.indexOf(key) < 0) keys.push(key);
13 };
14 const oldChildrenKeys = oldChildren.map((child) => child.props && child.props.key);
15 const childrenKeys = children.map((child) => child.props && child.props.key);
16 if (oldChildrenKeys.join('') !== childrenKeys.join('')) keys.push('children');
17 if (oldChildren.length !== children.length) keys.push('children');
18 const watchParams = paramsList.filter((key) => key[0] === '_').map((key) => key.replace(/_/, ''));
19 watchParams.forEach((key) => {
20 if (key in swiperParams && key in oldParams) {
21 if (isObject(swiperParams[key]) && isObject(oldParams[key])) {
22 const newKeys = Object.keys(swiperParams[key]);
23 const oldKeys = Object.keys(oldParams[key]);
24 if (newKeys.length !== oldKeys.length) {
25 addKey(key);
26 } else {
27 newKeys.forEach((newKey) => {
28 if (swiperParams[key][newKey] !== oldParams[key][newKey]) {
29 addKey(key);
30 }
31 });
32 oldKeys.forEach((oldKey) => {
33 if (swiperParams[key][oldKey] !== oldParams[key][oldKey]) addKey(key);
34 });
35 }
36 } else if (swiperParams[key] !== oldParams[key]) {
37 addKey(key);
38 }
39 } else if (key in swiperParams && !(key in oldParams)) {
40 addKey(key);
41 } else if (!(key in swiperParams) && key in oldParams) {
42 addKey(key);
43 }
44 });
45 return keys;
46 }
47
48 export {
49 getChangedParams
50 };
1 import Swiper from '../../index.js';
2 import {
3 isObject,
4 extend
5 } from './utils.js';
6 import {
7 paramsList
8 } from './params-list.js';
9
10 function getParams(obj = {}) {
11 const params = {
12 on: {},
13 };
14 const passedParams = {};
15 extend(params, Swiper.defaults);
16 extend(params, Swiper.extendedDefaults);
17 params._emitClasses = true;
18 params.init = false;
19
20 const rest = {};
21 const allowedParams = paramsList.map((key) => key.replace(/_/, ''));
22 // Prevent empty Object.keys(obj) array on ios.
23 const plainObj = Object.assign({}, obj);
24 Object.keys(plainObj).forEach((key) => {
25 if (typeof obj[key] === 'undefined') return;
26 if (allowedParams.indexOf(key) >= 0) {
27 if (isObject(obj[key])) {
28 params[key] = {};
29 passedParams[key] = {};
30 extend(params[key], obj[key]);
31 extend(passedParams[key], obj[key]);
32 } else {
33 params[key] = obj[key];
34 passedParams[key] = obj[key];
35 }
36 } else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
37 params.on[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
38 } else {
39 rest[key] = obj[key];
40 }
41 });
42
43 ['navigation', 'pagination', 'scrollbar'].forEach((key) => {
44 if (params[key] === true) params[key] = {};
45 if (params[key] === false) delete params[key];
46 });
47
48 return {
49 params,
50 passedParams,
51 rest
52 };
53 }
54
55 export {
56 getParams
57 };
1 import Swiper from '../../index.js';
2 import {
3 needsNavigation,
4 needsPagination,
5 needsScrollbar
6 } from './utils.js';
7
8 function initSwiper(swiperParams, native) {
9 return new Swiper(swiperParams, native);
10 }
11
12 function mountSwiper({
13 el,
14 nextEl,
15 prevEl,
16 paginationEl,
17 scrollbarEl,
18 swiper
19 }, swiperParams) {
20 if (needsNavigation(swiperParams) && nextEl && prevEl) {
21 swiper.params.navigation.nextEl = nextEl;
22 swiper.originalParams.navigation.nextEl = nextEl;
23 swiper.params.navigation.prevEl = prevEl;
24 swiper.originalParams.navigation.prevEl = prevEl;
25 }
26 if (needsPagination(swiperParams) && paginationEl) {
27 swiper.params.pagination.el = paginationEl;
28 swiper.originalParams.pagination.el = paginationEl;
29 }
30 if (needsScrollbar(swiperParams) && scrollbarEl) {
31 swiper.params.scrollbar.el = scrollbarEl;
32 swiper.originalParams.scrollbar.el = scrollbarEl;
33 }
34 swiper.init(el);
35 }
36
37 export {
38 initSwiper,
39 mountSwiper
40 };
1 import Swiper from '../../index.js';
2
3 function calcLoopedSlides(slides, swiperParams) {
4 let slidesPerViewParams = swiperParams.slidesPerView;
5 if (swiperParams.breakpoints) {
6 const breakpoint = Swiper.prototype.getBreakpoint(swiperParams.breakpoints);
7 const breakpointOnlyParams =
8 breakpoint in swiperParams.breakpoints ? swiperParams.breakpoints[breakpoint] : undefined;
9 if (breakpointOnlyParams && breakpointOnlyParams.slidesPerView) {
10 slidesPerViewParams = breakpointOnlyParams.slidesPerView;
11 }
12 }
13 let loopedSlides = Math.ceil(parseFloat(swiperParams.loopedSlides || slidesPerViewParams, 10));
14
15 loopedSlides += swiperParams.loopAdditionalSlides;
16
17 if (loopedSlides > slides.length) {
18 loopedSlides = slides.length;
19 }
20 return loopedSlides;
21 }
22
23 function renderLoop(native, swiperParams, data) {
24 const modifiedValue = data;
25 if (swiperParams.loopFillGroupWithBlank) {
26 const blankSlidesNum =
27 swiperParams.slidesPerGroup - (modifiedValue.length % swiperParams.slidesPerGroup);
28 if (blankSlidesNum !== swiperParams.slidesPerGroup) {
29 for (let i = 0; i < blankSlidesNum; i += 1) {
30 const blankSlide = h('div', {
31 class: `${swiperParams.slideClass} ${swiperParams.slideBlankClass}`,
32 });
33 modifiedValue.push(blankSlide);
34 }
35 }
36 }
37
38 if (swiperParams.slidesPerView === 'auto' && !swiperParams.loopedSlides) {
39 swiperParams.loopedSlides = modifiedValue.length;
40 }
41
42 const loopedSlides = calcLoopedSlides(modifiedValue, swiperParams);
43
44 const prependSlides = [];
45 const appendSlides = [];
46 const prependValue = [];
47 const appendValue = [];
48 modifiedValue.forEach((child, index) => {
49 if (index < loopedSlides) {
50 if (!native.loopUpdateData) {
51 appendValue.push(child);
52 }
53 }
54 if (index < modifiedValue.length && index >= modifiedValue.length - loopedSlides) {
55 if (!native.loopUpdateData) {
56 prependValue.push(child);
57 }
58 }
59 })
60 if (native) {
61 if (!native.originalDataList) native.originalDataList = [];
62 native.originalDataList = [...prependValue, ...modifiedValue, ...appendValue];
63 }
64
65 return {
66 data: [...prependValue, ...modifiedValue, ...appendValue]
67 };
68 }
69
70 export {
71 calcLoopedSlides,
72 renderLoop
73 };
1 /* underscore in name -> watch for changes */
2 const paramsList = [
3 'modules',
4 'init',
5 '_direction',
6 'touchEventsTarget',
7 'initialSlide',
8 '_speed',
9 'cssMode',
10 'updateOnWindowResize',
11 'resizeObserver',
12 'nested',
13 'focusableElements',
14 '_enabled',
15 '_width',
16 '_height',
17 'preventInteractionOnTransition',
18 'userAgent',
19 'url',
20 '_edgeSwipeDetection',
21 '_edgeSwipeThreshold',
22 '_freeMode',
23 '_autoHeight',
24 'setWrapperSize',
25 'virtualTranslate',
26 '_effect',
27 'breakpoints',
28 '_spaceBetween',
29 '_slidesPerView',
30 'maxBackfaceHiddenSlides',
31 '_grid',
32 '_slidesPerGroup',
33 '_slidesPerGroupSkip',
34 '_slidesPerGroupAuto',
35 '_centeredSlides',
36 '_centeredSlidesBounds',
37 '_slidesOffsetBefore',
38 '_slidesOffsetAfter',
39 'normalizeSlideIndex',
40 '_centerInsufficientSlides',
41 '_watchOverflow',
42 'roundLengths',
43 'touchRatio',
44 'touchAngle',
45 'simulateTouch',
46 '_shortSwipes',
47 '_longSwipes',
48 'longSwipesRatio',
49 'longSwipesMs',
50 '_followFinger',
51 'allowTouchMove',
52 '_threshold',
53 'touchMoveStopPropagation',
54 'touchStartPreventDefault',
55 'touchStartForcePreventDefault',
56 'touchReleaseOnEdges',
57 'uniqueNavElements',
58 '_resistance',
59 '_resistanceRatio',
60 '_watchSlidesProgress',
61 '_grabCursor',
62 'preventClicks',
63 'preventClicksPropagation',
64 '_slideToClickedSlide',
65 '_preloadImages',
66 'updateOnImagesReady',
67 '_loop',
68 '_loopAdditionalSlides',
69 '_loopedSlides',
70 '_loopFillGroupWithBlank',
71 'loopPreventsSlide',
72 '_rewind',
73 '_allowSlidePrev',
74 '_allowSlideNext',
75 '_swipeHandler',
76 '_noSwiping',
77 'noSwipingClass',
78 'noSwipingSelector',
79 'passiveListeners',
80 'containerModifierClass',
81 'slideClass',
82 'slideBlankClass',
83 'slideActiveClass',
84 'slideDuplicateActiveClass',
85 'slideVisibleClass',
86 'slideDuplicateClass',
87 'slideNextClass',
88 'slideDuplicateNextClass',
89 'slidePrevClass',
90 'slideDuplicatePrevClass',
91 'wrapperClass',
92 'runCallbacksOnInit',
93 'observer',
94 'observeParents',
95 'observeSlideChildren',
96
97 // modules
98 'a11y',
99 '_autoplay',
100 '_controller',
101 'coverflowEffect',
102 'cubeEffect',
103 'fadeEffect',
104 'flipEffect',
105 'creativeEffect',
106 'cardsEffect',
107 'panorama',
108 'hashNavigation',
109 'history',
110 'keyboard',
111 'lazy',
112 'mousewheel',
113 '_navigation',
114 '_pagination',
115 'parallax',
116 '_scrollbar',
117 '_thumbs',
118 '_virtual',
119 'zoom',
120 ];
121 export {
122 paramsList
123 };
1 import {
2 isObject,
3 extend
4 } from './utils.js';
5
6 async function updateSwiper({
7 swiper,
8 slides,
9 passedParams,
10 changedParams,
11 nextEl,
12 prevEl,
13 paginationEl,
14 scrollbarEl,
15 }) {
16 const updateParams = changedParams.filter((key) => key !== 'children' && key !== 'direction');
17 const {
18 params: currentParams,
19 pagination,
20 navigation,
21 scrollbar,
22 virtual,
23 thumbs
24 } = swiper;
25 let needThumbsInit;
26 let needControllerInit;
27 let needPaginationInit;
28 let needScrollbarInit;
29 let needNavigationInit;
30 if (
31 changedParams.includes('thumbs') &&
32 passedParams.thumbs &&
33 passedParams.thumbs.swiper &&
34 currentParams.thumbs &&
35 !currentParams.thumbs.swiper
36 ) {
37 needThumbsInit = true;
38 }
39 if (
40 changedParams.includes('controller') &&
41 passedParams.controller &&
42 passedParams.controller.control &&
43 currentParams.controller &&
44 !currentParams.controller.control
45 ) {
46 needControllerInit = true;
47 }
48 if (
49 changedParams.includes('pagination') &&
50 passedParams.pagination &&
51 (passedParams.pagination.el || paginationEl) &&
52 (currentParams.pagination || currentParams.pagination === false) &&
53 pagination &&
54 !pagination.el
55 ) {
56 needPaginationInit = true;
57 }
58
59 if (
60 changedParams.includes('scrollbar') &&
61 passedParams.scrollbar &&
62 (passedParams.scrollbar.el || scrollbarEl) &&
63 (currentParams.scrollbar || currentParams.scrollbar === false) &&
64 scrollbar &&
65 !scrollbar.el
66 ) {
67 needScrollbarInit = true;
68 }
69
70 if (
71 changedParams.includes('navigation') &&
72 passedParams.navigation &&
73 (passedParams.navigation.prevEl || prevEl) &&
74 (passedParams.navigation.nextEl || nextEl) &&
75 (currentParams.navigation || currentParams.navigation === false) &&
76 navigation &&
77 !navigation.prevEl &&
78 !navigation.nextEl
79 ) {
80 needNavigationInit = true;
81 }
82
83 const destroyModule = (mod) => {
84 if (!swiper[mod]) return;
85 swiper[mod].destroy();
86 if (mod === 'navigation') {
87 currentParams[mod].prevEl = undefined;
88 currentParams[mod].nextEl = undefined;
89 swiper[mod].prevEl = undefined;
90 swiper[mod].nextEl = undefined;
91 } else {
92 currentParams[mod].el = undefined;
93 swiper[mod].el = undefined;
94 }
95 };
96
97 updateParams.forEach((key) => {
98 if (isObject(currentParams[key]) && isObject(passedParams[key])) {
99 extend(currentParams[key], passedParams[key]);
100 } else {
101 const newValue = passedParams[key];
102 if (
103 (newValue === true || newValue === false) &&
104 (key === 'navigation' || key === 'pagination' || key === 'scrollbar')
105 ) {
106 if (newValue === false) {
107 destroyModule(key);
108 }
109 } else {
110 currentParams[key] = passedParams[key];
111 }
112 }
113 });
114 // if (changedParams.includes('virtual') && virtual && currentParams.virtual.enabled) {
115 // virtual.update();
116 // }
117 if (changedParams.includes('children') && virtual && currentParams.virtual.enabled) {
118 // virtual.slides = slides;
119 virtual.update(true);
120 } else if (changedParams.includes('children') && swiper.lazy && swiper.params.lazy.enabled) {
121 swiper.lazy.load();
122 }
123
124 if (needThumbsInit) {
125 const initialized = thumbs.init();
126 if (initialized) thumbs.update(true);
127 }
128
129 if (needControllerInit) {
130 swiper.controller.control = currentParams.controller.control;
131 }
132
133 if (needPaginationInit) {
134 if (paginationEl) currentParams.pagination.el = paginationEl;
135 pagination.init();
136 pagination.render();
137 pagination.update();
138 }
139
140 if (needScrollbarInit) {
141 if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
142 scrollbar.init();
143 scrollbar.updateSize();
144 scrollbar.setTranslate();
145 }
146
147 if (needNavigationInit) {
148 if (nextEl) currentParams.navigation.nextEl = nextEl;
149 if (prevEl) currentParams.navigation.prevEl = prevEl;
150 navigation.init();
151 navigation.update();
152 }
153
154 if (changedParams.includes('allowSlideNext')) {
155 swiper.allowSlideNext = passedParams.allowSlideNext;
156 }
157 if (changedParams.includes('allowSlidePrev')) {
158 swiper.allowSlidePrev = passedParams.allowSlidePrev;
159 }
160 if (changedParams.includes('direction')) {
161 swiper.changeDirection(passedParams.direction, false);
162 }
163 swiper.update();
164 }
165 export {
166 updateSwiper
167 };
1 function isObject(o) {
2 return (
3 typeof o === 'object' &&
4 o !== null &&
5 o.constructor &&
6 Object.prototype.toString.call(o).slice(8, -1) === 'Object'
7 );
8 }
9
10 function extend(target, src) {
11 const noExtend = ['__proto__', 'constructor', 'prototype'];
12 Object.keys(src)
13 .filter((key) => noExtend.indexOf(key) < 0)
14 .forEach((key) => {
15 if (typeof target[key] === 'undefined') target[key] = src[key];
16 else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
17 if (src[key].__swiper__) target[key] = src[key];
18 else extend(target[key], src[key]);
19 } else {
20 target[key] = src[key];
21 }
22 });
23 }
24
25 function needsNavigation(props = {}) {
26 return (
27 props.navigation &&
28 typeof props.navigation.nextEl === 'undefined' &&
29 typeof props.navigation.prevEl === 'undefined'
30 );
31 }
32
33 function needsPagination(props = {}) {
34 return props.pagination && typeof props.pagination.el === 'undefined';
35 }
36
37 function needsScrollbar(props = {}) {
38 return props.scrollbar;
39 }
40
41 function uniqueClasses(classNames = '') {
42 const classes = classNames
43 .split(' ')
44 .map((c) => c.trim())
45 .filter((c) => !!c);
46 const unique = [];
47 classes.forEach((c) => {
48 if (unique.indexOf(c) < 0) unique.push(c);
49 });
50 return unique.join(' ');
51 }
52
53 export {
54 isObject,
55 extend,
56 needsNavigation,
57 needsPagination,
58 needsScrollbar,
59 uniqueClasses
60 };
1 // import { h } from 'vue';
2
3 function updateOnVirtualData(swiper) {
4 if (
5 !swiper ||
6 swiper.destroyed ||
7 !swiper.params.virtual ||
8 (swiper.params.virtual && !swiper.params.virtual.enabled)
9 ) return;
10 swiper.updateSlides();
11 swiper.updateProgress();
12 swiper.updateSlidesClasses();
13 if (swiper.lazy && swiper.params.lazy.enabled) {
14 swiper.lazy.load();
15 }
16 if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
17 swiper.parallax.setTranslate();
18 }
19 }
20
21 function renderVirtual(swiperRef, slides, virtualData) {
22 if (!virtualData) return null;
23 const style = swiperRef.isHorizontal() ? {
24 [swiperRef.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`,
25 } : {
26 top: `${virtualData.offset}px`,
27 };
28 return slides
29 .filter((slide, index) => index >= virtualData.from && index <= virtualData.to)
30 .map((slide) => {
31 if (!slide.props) slide.props = {};
32 if (!slide.props.style) slide.props.style = {};
33 slide.props.swiperRef = swiperRef;
34 slide.props.style = style;
35 return h(slide.type, {
36 ...slide.props
37 }, slide.children);
38 });
39 }
40
41 export {
42 renderVirtual,
43 updateOnVirtualData
44 };
1 import {
2 nextTick
3 } from '../../shared/utils.js';
4 export default function Autoplay({
5 swiper,
6 extendParams,
7 on,
8 emit
9 }) {
10 let timeout;
11 swiper.autoplay = {
12 running: false,
13 paused: false
14 };
15 extendParams({
16 autoplay: {
17 enabled: false,
18 delay: 3000,
19 waitForTransition: true,
20 disableOnInteraction: true,
21 stopOnLastSlide: false,
22 reverseDirection: false,
23 pauseOnMouseEnter: false
24 }
25 });
26
27 function run() {
28 const $activeSlideEl = swiper.slides[swiper.activeIndex];
29 let delay = swiper.params.autoplay.delay;
30 clearTimeout(timeout);
31 timeout = nextTick(() => {
32 let autoplayResult;
33 if (swiper.params.autoplay.reverseDirection) {
34 if (swiper.params.loop) {
35 swiper.loopFix();
36 autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
37 emit('autoplay');
38 } else if (!swiper.isBeginning) {
39 autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
40 emit('autoplay');
41 } else if (!swiper.params.autoplay.stopOnLastSlide) {
42 autoplayResult = swiper.slideTo(swiper.slides.length - 1, swiper.params.speed, true, true);
43 emit('autoplay');
44 } else {
45 stop();
46 }
47 } else if (swiper.params.loop) {
48 swiper.loopFix();
49 setTimeout(() => {
50 autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
51 }, 30)
52
53 emit('autoplay');
54 } else if (!swiper.isEnd) {
55 autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
56 emit('autoplay');
57 } else if (!swiper.params.autoplay.stopOnLastSlide) {
58 autoplayResult = swiper.slideTo(0, swiper.params.speed, true, true);
59 emit('autoplay');
60 } else {
61 stop();
62 }
63
64 if (swiper.params.cssMode && swiper.autoplay.running) run();
65 else if (autoplayResult === false) {
66 run();
67 }
68 }, delay);
69 }
70
71 function start() {
72 if (typeof timeout !== 'undefined') return false;
73 if (swiper.autoplay.running) return false;
74 swiper.autoplay.running = true;
75 emit('autoplayStart');
76 run();
77 return true;
78 }
79
80 function stop() {
81 if (!swiper.autoplay.running) return false;
82 if (typeof timeout === 'undefined') return false;
83
84 if (timeout) {
85 clearTimeout(timeout);
86 timeout = undefined;
87 }
88
89 swiper.autoplay.running = false;
90 emit('autoplayStop');
91 return true;
92 }
93
94 function pause(speed) {
95 if (!swiper.autoplay.running) return;
96 if (swiper.autoplay.paused) return;
97 if (timeout) clearTimeout(timeout);
98 swiper.autoplay.paused = true;
99
100 if (speed === 0 || !swiper.params.autoplay.waitForTransition) {
101 swiper.autoplay.paused = false;
102 run();
103 } else {
104 ['transitionEnd', 'webkitTransitionEnd'].forEach(event => {
105 swiper.on(event, onTransitionEnd);
106 });
107 }
108 }
109
110 function onVisibilityChange() {
111 // const document = getDocument();
112
113 // if (document.visibilityState === 'hidden' && swiper.autoplay.running) {
114 // pause();
115 // }
116
117 // if (document.visibilityState === 'visible' && swiper.autoplay.paused) {
118 // run();
119 // swiper.autoplay.paused = false;
120 // }
121 }
122
123 function onTransitionEnd(e) {
124 if (!swiper || swiper.destroyed || !swiper.$wrapperEl) return;
125 // if (e.target !== swiper.$wrapperEl[0]) return;
126 ['transitionEnd', 'webkitTransitionEnd'].forEach(event => {
127 swiper.off(event, onTransitionEnd);
128 });
129 swiper.autoplay.paused = false;
130
131 if (!swiper.autoplay.running) {
132 stop();
133 } else {
134 run();
135 }
136 }
137
138 function onMouseEnter() {
139 if (swiper.params.autoplay.disableOnInteraction) {
140 stop();
141 } else {
142 pause();
143 }
144
145 // ['transitionend', 'webkitTransitionEnd'].forEach(event => {
146 // swiper.$wrapperEl[0].removeEventListener(event, onTransitionEnd);
147 // });
148 }
149
150 function onMouseLeave() {
151 if (swiper.params.autoplay.disableOnInteraction) {
152 return;
153 }
154
155 swiper.autoplay.paused = false;
156 run();
157 }
158
159 function attachMouseEvents() {
160 if (swiper.params.autoplay.pauseOnMouseEnter) {}
161 }
162
163 function detachMouseEvents() {}
164
165 on('init update', () => {
166 if (swiper.params.autoplay.enabled) {
167 start();
168 attachMouseEvents();
169 }
170 });
171 on('beforeTransitionStart', (_s, speed, internal) => {
172 if (swiper.autoplay.running) {
173 if (internal || !swiper.params.autoplay.disableOnInteraction) {
174 swiper.autoplay.pause(speed);
175 } else {
176 if (!swiper.params.loop) {
177 stop();
178 }
179
180 }
181 }
182 });
183 on('sliderFirstMove', () => {
184 if (swiper.autoplay.running) {
185 if (swiper.params.autoplay.disableOnInteraction) {
186 stop();
187 } else {
188 pause();
189 }
190 }
191 });
192 on('touch-end', () => {
193 if (swiper.params.cssMode && swiper.autoplay.paused && !swiper.params.autoplay.disableOnInteraction) {
194 run();
195 }
196 });
197 on('destroy', () => {
198 detachMouseEvents();
199
200 if (swiper.autoplay.running) {
201 stop();
202 }
203 });
204 Object.assign(swiper.autoplay, {
205 pause,
206 run,
207 start,
208 stop
209 });
210 }
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!