标签归档:vue-awesome-swiper

vue-awesome-swiper 使用问题汇总

因为之前都是使用Swiper插件来实现各种轮播效果,在新的vue项目中,就采用了vue-awesome-swiper这个基于Swiper的组件。但是使用的过程,出现不少的问题,现将出现的问题及解决方法记录下来。

这里先贴出最终的主要代码片段:

<div class="banner" ref="banner">
  <div v-if="bannerList.length"><!-- 使用v-if,处理异步请求数据,导致轮播第二次之后,首屏会自动跳过 -->
    <swiper :options="bannerOption" ref="bannerSwiper">
      <swiper-slide v-for="(item,index) in bannerList" :key="index">
        <img :src="item.img" alt="" class="swiper-lazy">
      </swiper-slide>
    </swiper>
  </div>
</div>
export default {
  data() {
    return {
      bannerOption: {
        slidesPerView: 1,
        loop: true,
        autoplay: {//定时轮播的正确写法
          delay: 3000,
          disableOnInteraction: false //处理滑动之后不能自动轮播的问题
        },
        on:{
          click:()=>{//点击事件需放在这里处理,否则无法触发最后一个轮播图
            let index = this.$refs.bannerSwiper.swiper.realIndex
            let link = this.bannerList[index]['link']

            window.location.href = link
          }
        }
      },
      bannerList: []
    }
  },
  activated(){

    if(this.bannerList.length) this.$refs.bannerSwiper.swiper.slideNext()//处理从其他页面切换回来轮播图不滚动问题
  }
}

问题1:定时轮播,不能直接给autoplay赋值毫秒数,需要使用上面的例子中写法。

问题2:异步请求数据,轮播第二次之后,首屏会自动跳过,原因是由于数据还没加载完成,swiper就初始化了,解决的方法是采用v-if的方式,等待数据加载完成后再初始化。

问题3:最后一个轮播图点击无效,目前处理的方法是将点击的事件放在swiper的on方法里面。

问题4:在vue单页应用中,从其他组件切换回来,轮播图不滚动了,处理方法是在activated钩子中调用swiper的slideNext方法