手动更改Swiper活动类

Question

我使用 Vuejs 制作了我的项目，并使用 Swiper 来滑动与页面 sections 标签相关的菜单。

我希望 Swiper 滑块在用户在我的页面上滚动时自动更改。

我尝试了以下代码：

刷卡代码

<swiper
  :slidesPerView="2.3"
  :spaceBetween="30"
  :centeredSlides="true"
  @swiper="onSwiper">
  <swiper-slide v-for="(item,index) in categoriesList" :key="index">
    <CategoryItem :title="item.title" :icon="item.icon"/>
  </swiper-slide>
</swiper>

类别项目示例：

categoriesList: [
    {
      foodsCount: 2,
      title: 'Pizza',
      icon: 'pizza.svg',
      tag: 'abcd-efgh-ijkl-mno1',
    },
  ];

部分

<section :id="'category-' + item.tag" v-for="(item,index) in categoriesList" :key="index">
  <div class="text-center q-mb-md">
    <b class="section-title">{{ item.title }}</b>
  </div>
  <food-item class="q-mb-md" v-for="i in item.foodsCount" :key="i"/>
</section>

创建了钩子（检查滚动代码）

created() {

    window.onscroll = () => {
      let current = "";
      let prevIndex = this.currentIndex;

      let sections = document.querySelectorAll('section')

      sections.forEach((section) => {
        const sectionTop = section.offsetTop;
        if (pageYOffset >= sectionTop) {
          current = section.getAttribute("id");
          this.currentIndex = this.categoriesList.findIndex(item => item.tag === current.replace('category-', ''))
        }
      });

      if (this.currentIndex !== prevIndex) {

        let i = 0
        document.querySelectorAll('.swiper-slide').forEach(item => {

          if (this.currentIndex === i) {
            item.classList = 'swiper-slide swiper-slide-active'
          } else if (this.currentIndex === (i - 1)) {
            item.classList = 'swiper-slide swiper-slide-next'
          } else if (this.currentIndex === (i + 1)) {
            item.classList = 'swiper-slide swiper-slide-previous'
          } else {
            item.classList = 'swiper-slide';
          }

          i++;
        })

      }

    };

注意：我无法使用 SlideTo 函数，因为它会在滚动时破坏动态。

我认为，它与 transform 风格有关 swiper-wrapper div 但我无法处理它。

<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(*, *, *);">

有什么解决办法吗？

Answer 1

我就是这样做的，没问题。

if (this.currentIndex !== prevIndex) {


          let i = 0
          document.querySelectorAll('.swiper-slide').forEach(item => {


            if (this.currentIndex === i) {
              item.classList = 'swiper-slide swiper-slide-active'

              document.querySelector('.swiper-wrapper').style.transform = "translate3d(" + this.swiperCategory.snapGrid[i] + "px, 0, 0)";
              document.querySelector('.swiper-wrapper').style.transitionDuration = "300ms";

            } else if (this.currentIndex === (i - 1)) {
              item.classList = 'swiper-slide swiper-slide-next'
            } else if (this.currentIndex === (i + 1)) {
              item.classList = 'swiper-slide swiper-slide-previous'
            } else {
              item.classList = 'swiper-slide';
            }


            i++;
          })


        }