movable-area组建缩放会引起小程序整体上下滑动的问题
634 浏览2023年04月02日作者:Johnny-lu

注意:只在安卓有问题,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安卓端可以搜索“日照方向小剧场”进行体验。

最后一次编辑于 2023 年 04 月 02 日
2 条评论

相关文章

专题推荐

热门文章

热门问答