手動更改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++;
          })


        }