问：

赏金将在 23 小时后到期。这个问题的答案有资格获得 +50 声望赏金。比利·布朗（Billy Brown）希望引起人们对这个问题的更多关注。

我尝试在 Swiper 中的鼠标滚轮对象内动态设置 eventsTarget，具体取决于使用 Vue.js 对数据属性的更改。本质上，当 disableBodyScroll 为 true 时，可以通过 eventsTarget：html 滚动轮播，否则使用默认的 swiper 容器：

  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()
            },
          },
        })
      }
    },
  },

我还有其他一些方法可以更改disableBodyScroll数据属性。我尝试了上面的代码但没有成功，它保持不变。我已经能够通过添加观察器并在再次初始化之前销毁轮播来使其工作

watch: {
  disableBodyScroll(newVal) {
    if (this.carousel) {
      this.carousel.destroy(true, false);
      this.initSwiper();
    }
  },

但是，这会将刷卡轮播恢复到初始状态，并且不是一个好的用户体验。在到达幻灯片的结尾和开头时，我尝试显式设置 eventsTarget 并使用 update（），但也没有成功。

有没有办法实现这一目标？

javascript vue.js swiper.js

答

创建包装元素并赋值。在数据属性上设置元素的大小与html正文（即）一样大或与容器一样大。mousewheel.eventsTarget100vh.bodyScroll

<template>
  <div class="wheel-control" :style="wheelControlStyle">
    <div class="swiper" ref="carousel">
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
    </div>
    <button @click="updateEventsTarget">change mousewheel eventstarget</button>
  </div>
</template>

export default defineComponent({
  data() {
    return {
      bodyScroll: true
    }
  },
  computed: {
    wheelControlStyle() {
      // if user should be scrolling on body, just make it as big as body.
      return { height: this.bodyScroll ? '100vh' : 'auto' }
    }
  },
  async mounted() {
    await this.$nextTick()
    this.initSwiper()
  },
  methods: {
    initSwiper() {
      console.log('refs', this.$refs)
      if (this.$refs?.carousel) {
        this.$carousel = new Swiper(this.$refs.carousel as HTMLElement, {
          mousewheel: {
            eventsTarget: '.wheel-control',
            releaseOnEdges: true
          }
        })
      }
    },
    updateEventsTarget() {
      console.log('updating')
      if (!this.$carousel) return
      this.bodyScroll = !this.bodyScroll
    }
  }

这是我的 Github 上的工作演示：https://github.com/rabelais88/stackoverflow-answers/tree/main/77486089-vue-swiper-dynamic-parameters

上一个：当代码片段从 Swiperjs 插入到 swiper-slide 中时，编辑 ace 代码编辑器不起作用。该怎么办？

下一个：如何在 Swiper coverflow 中制作两张侧面幻灯片

动态设置 Swiper JS 参数

Dynamically set a Swiper JS param

评论

答