uni-app 小米10手机 movable-view组件无法拖动

uni-app 小米10手机 movable-view组件无法拖动

开发环境 版本号 项目创建方式
Windows HBuilderX 
产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows10

HBuilderX类型：正式

HBuilderX版本号：3.1.2

第三方开发者工具版本号：3.1.2.20210206

基础库版本号：3.1.2.20210206

项目创建方式：HBuilderX

### 示例代码：

```html
<movable-area class="movableArea">
<movable-view ref="movable" class="movableArea movableView" direction="all" :x="moveX" :y="moveY"  :animation="false" :scale="true" :scale-min="0.5" :scale-max="2" :scale-value="scale" [@change](/user/change)="onMove" [@scale](/user/scale)="onScale">
<view>内容</view>
</movable-view>
</movable-area> 

.movableAreaBox {
width: 750rpx;
position: relative;
height: 100vh;
background: #f7f7f7;
overflow: hidden;
}

.movableArea {  
width: 750rpx;  
height: 100vh;  
background: #f7f7f7;  
}

操作步骤：

小米10手机movable-view无法拖动 其他手机正常

预期结果：

小米10手机可以正常拖动

实际结果：

小米10手机无法拖动

bug描述：

小米10手机movable-view无法拖动 其他手机正常


更多关于uni-app 小米10手机 movable-view组件无法拖动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

小米10青春版

<movable-area class="movableArea"> <movable-view ref="movable" class="movableArea movableView" direction="all" :x="moveX" :y="moveY" :animation="false" :scale="true" :scale-min="0.5" :scale-max="2" :scale-value="scale" @change="onMove" @scale="onScale"> <view>内容</view> </movable-view> </movable-area>

.movableAreaBox {
width: 750rpx;
position: relative;
height: 100vh;
background: #f7f7f7;
overflow: hidden;
}

.movableArea {  
    width: 750rpx;  
    height: 100vh;  
    background: #f7f7f7;  
}<br>

更多关于uni-app 小米10手机 movable-view组件无法拖动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


用示例代码hello uni-app能出现你的问题吗？

您好 示例代码hello uni-app可以重现

回复 逆风小康: 是Android 11版本？复现视频可以上传下附件。

回复 DCloud_UNI_Anne: 已经上传附件了

您好 这个问题现在有修复计划吗

您好，在小米10青春版的手机上 hello uni-app也有一样的的问题 缩小后可以移动 但是放大以后就不可以移动了 我这里有视频 <movable-area scale-area>
<movable-view direction=“all” @scale=“onScale” scale scale-min=“0.5” scale-max=“4” :scale-value=“scale”>text</movable-view>
</movable-area>

这个是手机的信息

这个压缩包里面包含了有问题的视频及其他正常机型的对比视频

在小米10等部分安卓机型上，movable-view组件拖动异常通常与触摸事件处理机制有关。检查以下几点：

  1. 确保movable-area尺寸正确，建议使用具体像素值而非百分比，避免容器尺寸计算异常。将height从100vh改为固定值，例如height: 1000px进行测试。

  2. 添加touch-action CSS属性：

.movableArea {
  touch-action: pan-x pan-y;
}
回到顶部