Vue中动态设置Swiper的mousewheel.eventsTarget，避免重置轮播状态

需求是根据disableBodyScroll数据属性的变化，动态设置Swiper的mousewheel.eventsTarget：当disableBodyScroll为true时，设置为html；否则使用默认的container。

现有代码如下：

data() {
  return {
    disableBodyScroll: false,
  }
},

async mounted() {
  await this.$nextTick()
  this.initSwiper()
},

methods: {
  initSwiper() {
    const vm = this

    if (this.$refs?.carousel) {
      this.carousel = new SwiperCore(this.$refs.carousel, {
        mousewheel: {
          eventsTarget: this.disableBodyScroll ? 'html' : 'container',
          releaseOnEdges: true,
          thresholdDelta: 1,
        },
        freeMode: this.mousewheelScroll,
        freeModeSticky: this.mousewheelScroll,
        on: {
          reachEnd: (swiper) => {
            vm.disableBodyScroll = false
            swiper.params.mousewheel.eventsTarget = 'container'
            swiper.update()
          },
          reachBeginning: (swiper) => {
            vm.disableBodyScroll = false
            swiper.params.mousewheel.eventsTarget = 'container'
            swiper.update()
          },
        },
      })
    }
  },
},

尝试过通过watch监听disableBodyScroll后销毁重建Swiper，但会导致轮播回到初始状态，体验不佳；直接修改params后调用update()也没有效果。

问题出在Swiper的mousewheel模块初始化时，会根据eventsTarget绑定对应的滚动事件，仅修改params并调用update()不会更新已绑定的事件监听。正确的做法是修改参数后，重新初始化mousewheel模块，同时保留当前轮播状态：

1. 修改watch监听逻辑 #

不需要销毁重建Swiper，直接修改参数后重置mousewheel模块：

watch: {
  disableBodyScroll(newVal) {
    if (this.carousel) {
      // 更新参数
      this.carousel.params.mousewheel.eventsTarget = newVal ? 'html' : 'container';
      // 销毁原有mousewheel事件监听
      this.carousel.mousewheel.destroy();
      // 重新初始化mousewheel模块
      this.carousel.mousewheel.init();
      // 更新Swiper状态
      this.carousel.update();
    }
  },
},

2. 修正首尾回调中的逻辑 #

同样在reachEnd和reachBeginning回调中使用相同的方式更新：

on: {
  reachEnd: (swiper) => {
    vm.disableBodyScroll = false;
    swiper.params.mousewheel.eventsTarget = 'container';
    swiper.mousewheel.destroy();
    swiper.mousewheel.init();
    swiper.update();
  },
  reachBeginning: (swiper) => {
    vm.disableBodyScroll = false;
    swiper.params.mousewheel.eventsTarget = 'container';
    swiper.mousewheel.destroy();
    swiper.mousewheel.init();
    swiper.update();
  },
},

原理说明 #

Swiper的每个模块（如mousewheel）都有独立的init()和destroy()方法，调用destroy()会移除该模块绑定的所有事件，再调用init()会根据最新的params重新绑定事件，这样就能在保留当前轮播位置的前提下，动态切换eventsTarget，避免销毁重建带来的状态重置问题。

内容的提问来源于stack exchange，提问作者Billy Brown