swiper在vue中使用的注意点
一、引入 直接在swiper官网下载相关的js, css文件,在index.html文件中使用script标签引入即可;二、使用 在生命周期mounted中直接new Swiper( )即可三、注意点 1. 有时我们使用swiper时会出现无法滑动的现象,主要原因可能是没有获取到dom元素,可以使用this.$nextTick( )或者加setTimeOu
一、引入
直接在swiper官网下载相关的js, css文件,在index.html文件中使用script标签引入即可;
二、使用
在生命周期mounted中直接new Swiper( )即可
三、注意点
1. 有时我们使用swiper时会出现无法滑动的现象,主要原因可能是没有获取到dom元素,可以使用this.$nextTick( )或者加setTimeOut( )在去new Swiper;
2. 如果我们需要滑动的元素为动态获取的数据渲染的,如swiper-slide为循环出来的li标签,建议在异步获取到数据后使用
this.$nextTick(function(){
myswiper = new Swiper('#container', {
swiper配置项
})
})
3. 有些情况在ios和andriod端会有一些其他bug,可以引入swiper.animate.js尝试修改
4. 有的bug是样式造成的,例如在外层容器上使用padding或者宽度是通过计算得到的等都可能会产生bug
更多推荐
所有评论(0)