手动更改Swiper活动类
P粉898107874
P粉898107874 2024-01-16 11:06:25
[Vue.js讨论组]

我使用 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(*, *, *);">

有什么解决办法吗?

P粉898107874
P粉898107874

全部回复(1)
P粉473363527

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

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


        }
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号