vue-awesome-swiper vertical loop 不生效

最新推荐文章于 2025-09-10 03:52:29 发布

原创最新推荐文章于 2025-09-10 03:52:29 发布 · 707 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swiper #vue swiper

vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了在Vue项目中使用vue-awesome-swiper组件实现垂直轮播效果的方法，尤其关注了在数据加载完成后绑定组件，确保verticalLoop选项正确生效，避免了在数据未加载完成前尝试渲染导致的轮播异常问题。

vue-awesome-swiper vertical loop 不生效

- 划重点：listData.length > 0

划重点：listData.length > 0

当数据加载完了再进行绑定

<div v-if="listData.length > 0" class="so-inner">
        <swiper :options="swiperOption" class="svip-inner" ref="mySwiper">
          <!-- slides -->
          <swiper-slide
            class="slider"
            v-bind:key="index"
            v-for="(item, index) in listData"
          >
            <img
              :src="item.avtar"
              onerror="this.src='https://qycdn.zhuoyoutech.com/qyresource/img/5.0/commenticon/logo.png'"
            />
            <span class="svip-text">
              恭喜
              <span>{{ changeName(item.nickName) }}</span
              >成功免费领取VIP会员
            </span>
          </swiper-slide>
        </swiper>
      </div>