Vue项目使用vue-awesome-swiper做轮播图时，异步调用数据时导致图片不能滑动的解决方法

最新推荐文章于 2021-09-15 17:35:37 发布

qq_43643806

最新推荐文章于 2021-09-15 17:35:37 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_43643806/article/details/89238275

vue-awesome-swiper 专栏收录该内容

1 篇文章

订阅专栏

本文介绍在Vue项目中使用vue-awesome-swiper实现轮播图时遇到的循环轮播失效问题及解决方案。问题源于swiper组件提前初始化，导致数据加载后无法显示。通过在组件上使用v-if条件判断，确保数据加载完成后再初始化，从而解决该问题。

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

Vue项目使用vue-awesome-swiper做轮播图时，轮播图片一般通过ajax后端获取，循环展示时会出现循环轮播失效的问题。原因是因为swiper提前初始化了，那个时候还没有数据，当数据调出来时已经没用了。我们住需要在swiper组件上用v-if就可以解决。

<template>
    <swiper :options="swiperOption" v-if="loopLists.length > 0">
    <swiper-slide v-for="slide in loopLists" :key="slide.id">
        <p>{{slide.text}}</p>
    </swiper-slide>
  </swiper>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    components: {
    swiper,
    swiperSlide
  },
  data(){
      return {
          loopLists:[],
          swiperOption: {
          loop: true,//环路
          autoplay:true,//自动轮播
        },
      }
  },
 mounted(){
      this. getLoopData()
  },
methods:{
    //获取轮播数据
    getLoopData() {
        this.$axios.get('/list').then((res)=>{
            console.log(res.data)
            this.loopLists = result.data;
        })
    },
}
}
</script>