https://www.yortoob.com/assets/js/unit/store-info.js

1class ScriptStoreInfo extends Script {
2  constructor(params) {
3    super(params);
4
5    this.attrId = params.attrId;
6    this.mySwiper = null;
7    this.prevScreenWidth = window.innerWidth;
8
9    // config
10    this.is_swiper = params.is_swiper;
11    this.delay = params.delay;
12    this.loop = params.loop;
13    this.mr_sm = params.mr_sm;
14    this.mr_md = params.mr_md;
15    this.mr_xl = params.mr_xl;
16
17    this.cols_xl = params.cols_xl;
18    this.cols_md = params.cols_md;
19    this.cols_col = params.cols_col;
20
21    // default
22    this.screen = this.getScreen(window.innerWidth);
23    this.screenMr = this.getSpace(this.screen);
24    this.cols = this.getCols(this.screen);
25
26    this.slides = params.slides; // 真实 slide 数量
27  }
28
29  // 🌟 根据屏幕宽度判断当前屏幕类型
30  getScreen(width) {
31    if (width < 768) return "sm";
32    if (width < 1200) return "md";
33    return "xl";
34  }
35
36  // 🌟 获取不同屏幕下的列数
37  getCols(screen) {
38    return {
39      sm: this.cols_col,
40      md: this.cols_md,
41      xl: this.cols_xl
42    }[screen];
43  }
44
45  // 🌟 获取不同屏幕的 margin
46  getSpace(screen) {
47    return {
48      sm: this.mr_sm,
49      md: this.mr_md,
50      xl: this.mr_xl
51    }[screen];
52  }
53
54  // 🌟 初始化或重建 Swiper
55  createSwiper() {
56    const attrId = this.attrId;
57
58    const enableLoop = this.loop == 1 && this.slides > this.cols;
59    const autoplayConfig =
60      this.is_swiper == 1
61        ? { delay: this.delay, disableOnInteraction: false }
62        : false;
63
64    this.mySwiper = new Swiper(`#${attrId} .siswiper`, {
65      loop: enableLoop,
66      speed: 600,
67      spaceBetween: parseFloat(this.screenMr) || 10,
68      slidesPerView: this.cols,
69      navigation: {
70        nextEl: `#${attrId} .siswiper .next`,
71        prevEl: `#${attrId} .siswiper .prev`,
72      },
73      autoplay: autoplayConfig
74    });
75  }
76
77  // 🌟 屏幕变化时重建 Swiper
78  handleResize = () => {
79    const width = window.innerWidth;
80    const newScreen = this.getScreen(width);
81
82    if (newScreen !== this.screen) {
83      // 更新 screen & 配置
84      this.screen = newScreen;
85      this.cols = this.getCols(newScreen);
86      this.screenMr = this.getSpace(newScreen);
87
88      // 销毁旧 Swiper
89      if (this.mySwiper) {
90        this.mySwiper.destroy(true, true);
91      }
92
93      // 创建新的 Swiper
94      this.createSwiper();
95
96      this.prevScreenWidth = width;
97    }
98  };
99
100  async init() {
101    // 初次初始化 Swiper
102    this.createSwiper();
103
104    // 监听 resize
105    window.addEventListener("resize", this.handleResize);
106  }
107}