search

didi / mand-mobile

💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
https://didi.github.io/mand-mobile
Apache License 2.0
3.46k stars 772 forks source link

Swiper组件(可左右滑动)阻止父元素左右滑动，不阻止自己左右滑动。没有暴露相关属性 #427

Closed cornucopib closed 5 years ago

cornucopib commented 5 years ago

Mand Mobile Version

暂无

OS Version & Browser Version

暂无

Node Version, Package Management Tool

暂无

Recurring Links

暂无

Recurring Steps

我有一个左右滑动的tabbar,其中的一个tab有一个左右滑动的swiper，我是想让swiper的视图范围可以滑动，tabbar不能左右滑动。貌似这个左右滑动的阻止应该放在swiper上面吧，不是放在swiperitem里面。这样我swiper都不能滑动了。所以是不是应该暴露个isStop属性形如isPrevent给上层使用者。

Expectant Behaviors

if (this.isPrevent) { e.preventDefault() } if (this.isStop) { //新增 e.stopPropagation(); }

Actual Behaviors

if (this.isPrevent) { e.preventDefault() }

xxyan0205 commented 5 years ago

https://github.com/didi/mand-mobile/blob/dev/components/tab-bar/demo/cases/demo6.vue

cornucopib commented 5 years ago

https://github.com/didi/mand-mobile/blob/dev/components/tab-bar/demo/cases/demo6.vue

这个例子比我的例子简单点。 我组件名简写了，我的场景大概是下面的样子:

<tabbar />
<swiper>
<swiper-item  v-for="(item,index) in items"
        :key="index">
 <component
            v-bind:is="tabsComponent[index]"
            :title="item.label"
          ></component>
</swiper-item
</swiper>

tabsComponent[index],是其中的一个组件，里面有一个可手动左右滑动的轮播图。 这个时候，我必须将tabsComponent[index]中的轮播图(swiper),添加一个e.stopPropagation();

xxyan0205 commented 5 years ago

我理解你的问题可以在tabsComponent的实现中增加一层元素拦截冒泡即可

<div @touchstart.stop @touchmove.stop @touchend.stop>
  <swiper></swiper>
</div>
cornucopib commented 5 years ago

我理解你的问题可以在tabsComponent的实现中增加一层元素拦截冒泡即可

<div @touchstart.stop @touchmove.stop @touchend.stop>
  <swiper></swiper>
</div>

我建议， 你在swiper中，增加isStop属性，在swiper的touch，mouse的事件钩子方法中增加形如isPrevent的处理。这样优雅很多，你觉得呢?