注意:只在安卓有问题,ios正常
movable-area组建,在团购购买唤起时,小程序可上下滑动切换半屏和全屏,这种状态下,双指缩放的时候,如果是横向的话没问题,而纵向的话会触发整个小程序的全屏和半屏切换逻辑。
uniapp写的,有用到了.stop和.prevent修饰符,如下代码
<movable-view class="w-full" :style="{ height: isHeight }" :inertia="true" :scale="true" :scale-min="0.5"
:scale-value="scaleValue" :scale-max="6" direction="all" @change="onMove" @scale="onScale">
......
</movable-view>
也尝试了手动调用e.stopPropagation()和e.preventDefault()进行阻止事件冒泡和阻止事件默认行为,如下代码:
onMove: function (e) {
e.stopPropagation && e.stopPropagation();
e.preventDefault && e.preventDefault();
this.moveX = e.detail.x;
return false;
},
//放大缩小事件
onScale: function (e) {
e.stopPropagation && e.stopPropagation();
e.preventDefault && e.preventDefault();
let w = this.boxWidth * 0.5;
let s = 1 - e.detail.scale;
this.moveX = w * s;
this.scale = e.detail.scale;
return false;
},
如下图,双指纵向张开和捏合时会触发整个界面上下滑动,而movable-view却没预期的缩放效果。
如有描述不到位不理解,抖音app安卓端可以搜索“日照方向小剧场”进行体验。