vue中使用swiper时无法响应式高度的解决方案

jansanluan

最近在vue中使用swiper的时候遇到了一个问题，当浏览器窗口的大小改变时没办法响应式的改变swiper组件的高度。尝试了几天之后找到了一种解决办法。直接上代码。

1. export default {
   
2.     data() {
   
3.         return {
   
4.             swiperOptions: {
   
5.             // 滑动方向
   
6.             direction: 'vertical',
   
7.             // 滑动速度
   
8.             speed: 700,
   
9.             // 设置容器同时显示的数量
   
10.             slidesPerView: 1,
    
11.             allowTouchMove: true,
    
12.             spaceBetween: 0,
    
13.             mousewheel: true,
    
14.             // observer和observeParents必须设置
    
15.             observer: true,
    
16.             observeParents: true,
    
17.             }
    
18.         };
    
19.       },
    
20.       computed: {
    
21.            swiper() {
    
22.                 return this.$refs.mySwiper.swiper;
    
23.            }
    
24.        },
    
25.        mounted() {
    
26.              // 初始化swiper的高度
    
27.             this.swiper.el.style.height = window.innerHeight + 'px';
    
28.              // 当屏幕尺寸改变时，
    
29.             let timeout = null;
    
30.             window.onresize = () => {
    
31.                  clearTimeout(timeout);
    
32.                  timeout = setTimeout(() => {
    
33.                        this.swiper.el.style.height = window.innerHeight + 'px';
    
34.                  }, 100);
    
35.             };
    
36.           }
    
37.         };

复制代码

以及在vue文件中

1. <template>
   
2.     <swiper ref="mySwiper" :options="swiperOptions">
   
3.         <swiper-slide>
   
4.         </swiper-slide>
   
5.     </swiper>
   
6. </template>

复制代码