轮播组件出现滑动不会整屏走的现象--(慕课网-去哪儿网)

在写去哪儿网的详情页的时候出现一个问题就是,一开始进入这个页面的时候轮播组件是隐藏的,点击头部则伦比组件显示,但是滑动轮播的时候发现不会整屏的滑动,而是一点点的动,如下图:
轮播组件出现滑动不会整屏走的现象--(慕课网-去哪儿网)

这里是因为swiper一开始是隐藏的,点击banner图显示,此时的dom结构发生了变化,则swiper的宽度计算就会出问题,导致这种情况

解决办法:
使用observeParents和observer这两个属性
这两个属性会使swiper在此元素或者父级元素发生变化之后自动刷新一次,就保证了swiper计算的正确性
轮播组件出现滑动不会整屏走的现象--(慕课网-去哪儿网)