city-swiper.js
1.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import Swiper from 'yoho-swiper';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
class CitySwiper extends Page {
constructor(data) {
super();
this.selector = {
$swiperC: $('.city-swiper'),
$swiper: $('.city-swiper .swiper-list').find('.swiper-container'),
$slide: $('.city-swiper .swiper-list').find('.swiper-slide'),
$swiperLine: $('.city-swiper .swiper-line'),
$swiperList: $('.city-swiper .swiper-list')
};
this.init(data);
}
init(data) {
let swiperParams = this.swiperParams(data);
this.setStyle(data);
new Swiper('.city-swiper .swiper-container', swiperParams);
}
setStyle(data) {
let wWidth = $(window).width();
let swiperWidth = wWidth / data.swiperNum || 1;
let lineHeight = this.selector.$swiperList.height() / data.lineNum;
let lineTop = lineHeight / 2;
if (data.hidePartingLine) {
this.selector.$swiperLine.hide();
}
this.selector.$swiper.css('width', `${swiperWidth}px`);
this.selector.$swiperLine.css('height', `${lineHeight}px`);
this.selector.$swiperLine.css('margin-top', `-${lineTop}px`);
}
swiperParams(data) {
let $thisSwiper = '';
let newParams = {
direction: 'vertical',
slidesPerView: data.lineNum || 1,
centeredSlides: data.centeredSlides,
loop: data.true,
onInit: (swiper) => {
$thisSwiper = swiper.activeIndex;
$thisSwiper = $(swiper.slides[`${$thisSwiper}`]);
this.emit('citySwiperCb', $thisSwiper);
},
onSlideChangeEnd: (swiper) => {
$thisSwiper = swiper.activeIndex;
$thisSwiper = $(swiper.slides[`${$thisSwiper}`]);
this.emit('citySwiperCb', $thisSwiper);
}
};
return newParams;
}
}
module.exports = CitySwiper;