swiper高度在页面跳转再回来之后会有异常

[llk2yq]

Vue.js version and component version

"vue": "^2.5.9",
"vue-awesome-swiper": "^3.0.6",

目前的情况：

有两个swiper，第一个是垂直布局（容器高度是半屏左右），分上下两页，第二页就是第二个swiper，是水平布局。 页面初始化是正常的，可以上下滑动，或者在第二页左右滑动。

问题：当从当前路由进入其它路由，再返回当前路由时，整个页面都可以上下滑动了，理想情况应该是下面半屏左右才可以滑动。

mac的safari浏览器测试是正常的（可能是偶然性），但是chrome，安卓的浏览器都测试不正常。

通过浏览器开发者工具，可以看到是外层swiper的高度变了，第一次是326，第二次（路由跳转再返回后）就变成1132了。第二个swiper共5页。

• 尝试过用v-if在mounted去控制swiper的显示于隐藏
• 尝试过swiper文档中的update方法

都没有效果。

[surmon-china]

@YYQ8023

是图里这样的结构吗，两个 swiper 是嵌套关系，还是平级兄弟关系，发现高度变化时，是swiper1的容器高度发生变化把 swiper2 挤到视觉区域外，还是 swiper2 发生变化，还是其他的情况，最好能有个组件 demo，方便排错

[llk2yq]

@surmon-china 哇，辛苦了，感谢。

整个屏幕分上下两部分，上半部分是固定的，始终不变的。 下半部分首先是swiper1，上下滑动，但是swiper1只有两页，swiper1的第二页，是一个swiper2，此时还可以上下滑动到swiper1，也可以左右滑动swiper2。

代码大致如下

//这里是swiper1
<swiper1>
  <swiper-slide>
  //这里是swiper1的第一页内容
  </swiper-slide>
  <swiper-slide>
   //这里是swiper1的第二页内容，里面是swiper2
   //这里是swiper1
    <swiper2>
       //这里是swiper2的内容，里面有5个子<swiper-slide>，左右滑动正常。
    <swiper2>
  </swiper-slide>
</swiper1>

swiper2是swiper1的其中一页，官方demo中应该有类似这个效果：“Nested Swipers （ Swipers 嵌套 ）”

[surmon-china]

@YYQ8023 你把组件代码贴一下吧，要包含 CSS，我在本地测试下

[llk2yq]

@surmon-china 先问一下，怎么监听事件呢？根据swiper4的文档， <swiper @slideChange="test" :options="swiperOption" ref="mySwiper"> test事件不会被触发，试过几个事件，都不触发。

[llk2yq]

@surmon-china 关于代码，我暂时解决了，用v-if去控制swiper2的显示或隐藏可能可以解决，我明天再测试以下，然后再贴代码，感谢！

[surmon-china]

这样当然不会的，你监听的是组件事件，而组件内部并没有转化 swiper 事件，你可以这样：

1. 传入配置回调

   swiperOption: {
   on: {
      '各种事件'() {}
   }
   }

2. 使用实例方法

   this.$refs.mySwiper.swiper.on('各种事件', () => {})

[llk2yq]

@surmon-china 我看了源码确实没有emit事件，ok，明白了，谢谢。

[surmon-china]

事件转换很简单，只是如果应用场景不高，会增加代码复杂度，升级更新可能也不及时，所以 API 方面的东西都尽量减少耦合，这里这个组件是有转换的，而且可以自定义。

https://github.com/surmon-china/vue-codemirror/blob/master/src/codemirror.vue#L132

[llk2yq]

@surmon-china 关于事件我这样写会在初始化的时候触发一次，然后就不再触发：

swiperOption: {
          on:{
            'slideChangeTransitionEnd':this.changeSilde(),
          }
        },
//....
changeSilde(){
    alert('1')
}

如果是这样就可以：

mounted() {
       this.$refs.mySwiper.swiper.on('slideChangeTransitionEnd',()=>this.changeSilde());
    },

[surmon-china]

大哥 this.changeSilde() 返回什么？？？

[surmon-china]

@YYQ8023 这些都可以，明白拉嘛

{ slideChangeTransitionEnd:this.changeSilde }
{ slideChangeTransitionEnd() { this.changeSilde() } }
this.$refs.mySwiper.swiper.on('slideChangeTransitionEnd', this.changeSilde);
this.$refs.mySwiper.swiper.on('slideChangeTransitionEnd', () => this.changeSilde())
this.$refs.mySwiper.swiper.on('slideChangeTransitionEnd' ,() => ( this.changeSilde() ));
this.$refs.mySwiper.swiper.on('slideChangeTransitionEnd' ,() => { this.changeSilde() });

[llk2yq]

@surmon-china 确实，方法带括号就直接执行了，疏忽了，哈哈哈，谢谢。