city-swiper.js
2.25 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
63
64
65
66
67
68
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.provinceSwiper = '';
this.citySwiper = '';
this.init(data);
}
init(data) {
let swiperParams = this.swiperParams(data);
this.setStyle(data);
this.provinceSwiper = new Swiper('.city-swiper #province-c', swiperParams);
this.citySwiper = new Swiper('.city-swiper #city-c', swiperParams);
}
setStyle(data) {
let lineHeight = this.selector.$swiperList.height() / data.lineNum;
let lineTop = lineHeight / 2;
if (data.hidePartingLine) {
this.selector.$swiperLine.hide();
}
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,
observer: true,
observeParents: true,
slideToClickedSlide: true,
onInit: (swiper) => {
$thisSwiper = swiper.activeIndex;
$thisSwiper = $(swiper.slides[`${$thisSwiper}`]);
this.emit('citySwiperCb', $thisSwiper);
},
onSlideChangeEnd: (swiper) => {
if ($(swiper.container[0]).index() === 0) {
this.citySwiper.slideTo(0, 1000, false); // 重选省份时，城市设置为第一个
}
$thisSwiper = swiper.activeIndex;
$thisSwiper = $(swiper.slides[`${$thisSwiper}`]);
this.emit('citySwiperCb', $thisSwiper);
}
};
return newParams;
}
}
module.exports = CitySwiper;