vue-awesome-swiper vertical loop 不生效

AspNetSunny

于 2020-03-26 17:25:58 发布

阅读量690

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： swiper vue swiper

本文链接：https://blog.youkuaiyun.com/sunnywuxian/article/details/105123419

vue 专栏收录该内容

11 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>