vue中使用swiper出现loop和autoplay失效问题

最新推荐文章于 2024-06-27 15:08:17 发布

ansui4516

最新推荐文章于 2024-06-27 15:08:17 发布

阅读量3.4k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mmh1430702240/p/10918859.html

版权

在Vue项目中使用Swiper组件时遇到loop和autoplay功能失效的bug。问题出在创建Swiper实例的时机，通过在代码中添加setTimeout可以解决这个问题，确保在DOM加载完成后初始化Swiper。

摘要由CSDN通过智能技术生成

在vue中使用了swiper，结果出现了一系列的bug，在代码中修改能够使swiper中的属性正常运行，但是只要一刷新页面，swiper所有的属性就都不好使了。
究其原因，发现原来是在 new Swiper 的时候出了问题，简单的加一个setTimeout就好啦！话不多说，上代码：

<template>

<div v-if="bannerList.length">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
        <a :href="item.banner_url">
          <img :src="item.banner_img" style="width: 100%;"/>
        </a>
      </div>
    </div>
    <div class="swiper-pagination"></div&g