【Vue】Vue-awe-swiper使用和错误总结

版本号：vue-awesome-swiper@2.6.7 对应Swiper3文档
官网链接：https://github.com/surmon-china/vue-awesome-swiper/tree/v2.6.7
全局引入：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

问题概要

• 切换问题
• 刷新之后swiper从最后一张轮播图开始轮播
• swiper实例undefined
• 使用keep-alive切换路由回来后自动轮播失效

切换问题

如果swiper一开始处于display：none的情况下，后来display：block，那么swiper功能就会出现问题，比如分页器失效
开启监视器：当swiper样式改变的时候(例如隐藏显示)，自动初始化swiper
• observer: true
• observeParents: true

刷新之后swiper从最后一张轮播图开始轮播

原因：图片数据是在父组件通过mounted通过axios请求的，在Vue渲染DOM结构的时候，数据还没有请求过来或还没传到子组件的props中 所以需要在swiper组件上使用`v-if`判断是否拿到渲染的数据再渲染swiper组件

property 'swiper' undefined

方案一：

因为父级元素上有v-if,把v-if改为v-show即可，如果想避免问题2的bug可以采取方案

原因：v-if是惰性渲染，开始为fasle的时候并不会渲染所在DOM结构，那么swiper想通过this.$refs.ref名字.swiper也就拿不到了DOM上的ref名字了
方案二：父级元素上仍有v-if，如果还想获取this.$refs.ref名字.swiper实例对象上的方法：
在swiper组件挂有v-if且v-if值为false时，是不能通过mounted获取swiper实例对象的
原因是mounted在拿ref的时候，可能v-if那边还是fasle 值还没从父组件传进来，所以这个Dom节点没有被渲染
解决方法：在updated可以访问swiper实例，把this.swiper赋值给data中的一个空对象保存，相当于浅拷贝了一份this.swiper的引用

使用keep-alive切换路由后自动轮播失效

keep-live使得页面缓存，同时也提供了两个钩子函数：actativated、deactivated,分别是进入页面/离开页面触发
方案一：可以通过v-if惰性渲染的机制，让swiper组件在切换路由回来之后通过actativated、deactivated钩子函数来判断是否重新渲染swiper组件
但方案一存在一些问题：从组件A(轮播图所在的组件)当轮播到第三张图片时，从A组件切换到B组件再回来就会发现组件A的轮播图从第一张开始渲染了：

这是由v-if的机制决定的，方案二解决了这个问题 `方案二`： 之前在问题3中，已经通过this.AcSwiper拿到了swiper实例， keep-live对组件A进行了缓存，当组件A切换到组件B的时候，Swiper的realIndex索引值还是+1的，说明swiper还在轮播,这一点可以通过在actativated、deactivated打印realIndex来验证 那么这个时候就可以通过Swiper提供的startAutoplay()/stopAutoplay()来解决这个问题 在离开时：deactivated钩子函数中停止轮播 在回来时：actativated钩子函数中开启轮播

可以看看这个时候的效果：

项目地址

https://github.com/rzhAvenir/qunar