Ändern Sie die Swiper-Aktivitätsklasse manuell

Question

Ich verwende Vuejs 制作了我的项目，并使用 Swiper 来滑动与页面 sections Tag-bezogene Menüs.

Ich möchte, dass sich der Swiper-Schieberegler automatisch ändert, wenn der Benutzer auf meiner Seite scrollt.

Ich habe den folgenden Code ausprobiert:

Swipe-Code

<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>

Beispiel für einen Kategorieartikel:

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

Teil

<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>

Hook erstellt (überprüfen Sie den Scrollcode)

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++;
        })

      }

    };

Hinweis: Ich kann die SlideTo-Funktion nicht verwenden, da sie die Dynamik beim Scrollen beeinträchtigt.

Ich denke, es hat etwas mit dem transform 风格有关 swiper-wrapper div zu tun, aber ich komme damit nicht klar.

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

Gibt es eine Lösung?

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++;
          })


        }