解决在vue中使⽤swiperloop失效的问题⼀、html 及引⼊⽂件
1.引⼊⽂件
vue,axios,mock,swiper,jquery的js⽂件
swiper css⽂件
2.css样式
给 swiper 设置宽⾼
3.html
swiper html
⼆.渲染数据
1.⽤mock⽣成随机虚拟数据
mock⽣成随机数据
2.⽤ axios 执⾏get请求 请求数据 并赋值给data中的imgList
运⽤axios 执⾏get指令获取数据 并赋值给data中的imgList
3.循环使⽤v-for指令绑定数据渲染
循环使⽤v-for指令绑定数据渲染
初始化 Swiper
5.在created 中调⽤
调⽤以渲染页⾯
三.具体问题
1.初始化完成后 swiper 轮播出现问题1：不能⾃动切换
1.问题产⽣原因：
axios 执⾏get指令是异步请求
即在axios请求数据过程中 initSwiper运⾏时要绑定的部分元素节点还没有创建成功
导致swiper插件中部分指定并没有绑定到指定元素节点上
导致swiper轮播出现异常
2.解决⽅法：
swiper中的observer⽅法，在启动状态下，当我们修改swiper的⼦元素时，会⾃动初始化swiper
即 observer:true,
并该指令⼀般情况下搭配 observeParents:true,⼀起使⽤ 即当Swiper的⽗元素变化时，会更新swiper
3.更改部分：
增加 observer: true, observeParents: true,
2.更改完成后 swiper 轮播出现问题2：切换到最后⼀张即停⽌
1.问题原因：
在jQuery中 当得到数据时，是边加载边更新Dom
但是在Vue中 当得到数据时， ⽽是全部加载完以后再更新Dom
即在这个问题中， initSwiper运⾏完之后，axios请求到的数据才加载完并更新Dom
在⼀开始容器中的数据并没有渲染 此时swiperOption配置的loop: true不⽣效
⽽即使swiper更新 ⽽loop属性却并不会重新加载 即loop为false
2.解决⽅法：
⽅法① 给initSwiper添加定时器 即等到axios数据加载完并渲染完页⾯以后再运⾏
添加定时器
但是在⽐较⼤的项⽬中，数据请求时间可能远远⼤于300ms 影响⽤户体验 所以不推荐使⽤
⽅法②不在created中调⽤initSwiper ⽽是在axios中调⽤initSwiper
并且利⽤ setTimeout(()=>{ },0)的异步请求属性 即等待axios的get指令请求和渲染完 再执⾏。
利⽤setTimeout(()=>{},0)
⽅法③类似于⽅法②
jquery在项目里是干啥的在vue中有Tick( [callback, context] )机制
即在下次 DOM 更新循环结束之后执⾏延迟回调。
即this.$nextTick(()=>{})
this.$nextTick(()=>{})
四.核⼼代码
1.observer: true, observeParents: true,
2.this.$nextTick(()=>{})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。