解决在vue中使用swiper loop失效的问题
解决swiper 无法显示,无法切换下一页,循环数据不渲染
一、html中引入
1.引入文件
vue下载文件
axios下载及引用方式
mockjs
swiper
jquery
引入swiper.css文件
2.设置css样式
3.html
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
swiper使用方法
还有一些使用swiper-container的
其实 从Swiper7开始,容器默认类名由’.swiper-container’变更为’.swiper’。
更多api请参考 swiperApi
二、渲染数据
1.用mock生成随机虚拟数据
Mock.mock("login",{
"imgList|5":["@color()"]
}//运用mock生成随机数据
2.用axios执行get请求数据,并赋值给data中的data中的imgList
methods:{
getData(){
axios.get("/login").then(response=>{
this.imgList=response.data.imgList
//运用axios 执行get指令获取数据 并赋值给data中的imgList
})
},
3.循环使用v-for指令绑定数据渲染
<div class="swiper">
<div class="swiper-wrapper" ref="mySwiper">
<div class="swiper-slide" v-for="(item,index) in imgList" :key="index" :style="{background:item}">{{index}}</div>
</div>
//这个是分页器导航
<div class="swiper-pagination"></div>
</div>
这里如果不加key可能会报错
4.methods中编辑初始化Swiper方法
initSwiper(){
var swiper = new Swiper(this.$refs.mySwiper, {
//设置slider容器能够同时显示的slides数量
slidesPerView: 4,
//每个swiper-slide的间隔距离
spaceBetween: 30,
//在carousel mode下定义slides的数量多少为一组
slidesPerGroup: 4,
//是否循环 true 是,false 否
loop: true,
//在loop 模式下,将用空白slide 填充slide 数量不足的组{loop和loopFillGroupWithBlank是一个组合}
loopFillGroupWithBlank: true,
//初始化分页导航
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
}
5.在created中调用
created(){
this.getData()
this.initSwiper()
}
三、具体问题
1.初始化完成之后swiper轮播出现问题1:不能自动切换甚至循环页面不能显示
1.问题产生原因:
axios执行get指令是异步请求
即在axios请求数据过程中initSwiper方法运行时要绑定的部分元素节点还没有创建成功导致swiper插件中部分指定并没有绑定到指定元素节点上
导致swiper轮播出现异常
2解决方法:
swiper中的abserver方法,在启动状态下,当我们修改swiper的子元素时,会自动初始化swiper即observer:true,
并该指令一般情况下搭配abserveParents:true,一起使用即当swiper的父元素变化时,会更新swiper
3.更改部分:
initSwiper(){
var swiper = new Swiper(this.$refs.mySwiper, {
//设置slider容器能够同时显示的slides数量
slidesPerView: 4,
//每个swiper-slide的间隔距离
spaceBetween: 30,
//在carousel mode下定义slides的数量多少为一组
slidesPerGroup: 4,
//是否循环 true 是,false 否
loop: true,
//在loop 模式下,将用空白slide 填充slide 数量不足的组{loop和loopFillGroupWithBlank是一个组合}
loopFillGroupWithBlank: true,
observer:true,
observeParents:true,
//初始化分页导航
pagination: {
el: ".swiper-pagination",
clickable: true,
}
});
}
2.更改完成后swiper轮播出现问题2:切换到最后一张即停止
1.问题原因:
在jquery中当得到数据时,是边加载边更新Dom
但是在Vue中,当得到数据时,而是全部加载完以后再更新Dom
即在这个问题中,initSwiper运行完之后,axios请求到的数据才加载完并更新Dom
在一开始容器中的数据并没有渲染 此时swiperOption配置的loop:true不生效
而即使swiper更新而loop属性却并不会重新加载即loop为false
2.解决方法:
方法 给initSwiper添加定时器 即等到axios数据加载完并渲染完页面以后再运行
setTimeout(()=>{
var swiper = new Swiper(this.$refs.mySwiper, {
//设置slider容器能够同时显示的slides数量
slidesPerView: 4,
//每个swiper-slide的间隔距离
spaceBetween: 30,
//在carousel mode下定义slides的数量多少为一组
slidesPerGroup: 4,
//是否循环 true 是,false 否
loop: true,
//在loop 模式下,将用空白slide 填充slide 数量不足的组{loop和loopFillGroupWithBlank是一个组合}
loopFillGroupWithBlank: true,
observer:true,
observeParents:true,
//初始化分页导航
pagination: {
el: ".swiper-pagination",
clickable: true,
}
});
},300)
但是在比较大的项目中,数据请求时间可能远远大于300ms影响用户体验 所有不推荐使用方法2 不在created中调用initSwiper而是在axios中调用initSwiper
created(){
this.getData()
}
并且利用setTimeout(()=>{},0)的异步请求属性 即等待axios的get指令请求和渲染完再执行。
getData(){
axios.get("/login").then(respponse=>{
this.imgList=response.data.imgList
setTimeout(()=>{
this.initSwiper()
},0)
})
方法3类似于方法2
在vue中有Vue.nextTick([callback,context])机制
即在下次DOM更新循环结束之后执行延迟回调。
即this.$nextTick(()=>{})
getData(){
axios.get("/login").then(respponse=>{
this.imgList=response.data.imgList
this.$nextTick(()=>{
this.initSwiper()
})
})
四、核心代码
1.observer:true,observeParents:true
2.this.$nextTick(()=>{})
更多推荐
所有评论(0)