Tukar kelas aktiviti Swiper secara manual

Question

Saya menggunakan Vuejs 制作了我的项目，并使用 Swiper 来滑动与页面 sections menu berkaitan tag.

Saya mahu peluncur Swiper berubah secara automatik apabila pengguna menatal pada halaman saya.

Saya mencuba kod berikut:

Kod leret

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

Kategori Item Contoh:

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

Bahagian

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

Cakuk dibuat (semak kod tatal)

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

      }

    };

Nota: Saya tidak boleh menggunakan fungsi SlideTo kerana ia memecahkan dinamik semasa menatal.

Saya rasa, ia ada kaitan dengan transform 风格有关 swiper-wrapper div tetapi saya tidak boleh mengendalikannya.

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

Ada penyelesaian?

Answer 1

Itu yang saya lakukan, tiada masalah.

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


        }