Swiper中文论坛

标题: vue中使用swiper时无法响应式高度的解决方案 [打印本页]
作者: jansanluan    时间: 2018-7-3 11:03
标题: vue中使用swiper时无法响应式高度的解决方案
本帖最后由 jansanluan 于 2018-7-3 16:20 编辑

最近在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>
复制代码








欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2