vue中使用vue-awesome-swiper注意事项

1 关于vue中使用swiper,swiper不能滑动,loop循环效果失效等问题

swiper不能滑动主要是因为初始化swiper的时候没有拿到数据所导致的,解决这个问题只需先拿到数据,然后再初始化swiper.网上有很多方法都是沿用了在非框架中使用swiper的方法

var mySwiper = new Swiper('.swiper-container', options)

个人不建议在vue中直接使用这种初始化的方式,因为你还需要考虑先拿数据,拿了数据也不是立马能够初始化swiper的,一部分人的做法是拿到数据后使用vue的nextTick的方法初始化:

await this.getData()//获取swiper所需数据
this.$nextTick(callback)//获取数据后再nexttick的回调函数中进行swiper的初始化

这种方法本质上是可行的,但有一个更简单的方式
html

<swiper v-if="bannerList.length>0" :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(item,ind) in bannerList" :key="ind" @click.native="clickSwiper(item)" :data-ind='ind'>
          swiper-slide>
      swiper>

只需用v-if来控制,如果有数据swiper才渲染

2 vue中使用slideChangeTransitionEnd方法会出现触发不了的情况

我想不单单是slideChangeTransitionEnd这个方法会出现这种情况,应该其他的方法都会,如果我们使用组件方式引入swiper,控制swiper自身的事件会有一些让人想摔键盘的冲动,因为明明你写的和文档的一模一样,但就是有时候会出现触发不了情况,不过好在我们用的事件还不算多,click我们可以在组件上直接写,记得要加上native属性.
但是像slideChangeTransitionEnd这种,就很难搞了,我的建议是,在拿到数据之后,通过this.$nextTick(callback),在callback回调中对swiper元素进行touchend事件监听,将所需的数据(其实我们只需要一个索引值)绑定到相应swiper-slide元素的属性上即可,即上面代码的data-info

你可能感兴趣的:(前端)