movable-view 在uni-app中进行可拖拽和可缩放大小功能，缩放到最大时候拖动x为0坐标，然后再重新动态x=0，会远距离不等于0

movable-view 在uni-app中进行可拖拽和可缩放大小功能，缩放到最大时候拖动x为0坐标，然后再重新动态x=0，会远距离不等于0

产品分类：

uniapp/小程序/微信

PC开发环境操作系统：

Mac

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

10.15.1

HBuilderX类型：

正式

HBuilderX版本号：

4.75

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

4.75

基础库版本号：

3.8.10

项目创建方式：

HBuilderX

示例代码：

<template>  
    <view class="container">  
        <!-- 顶部标题 -->  
        <view class="header">  
            <text class="title">藏品布局工具</text>  
        </view>  

        <view class="main-content">  
            <!-- 中间：布局区域 -->  
            <view class="center-panel">  
                <text class="panel-title">布局区域</text>  
                <movable-area class="layout-area" ref="layoutArea">  
                    <!-- 选中的背景图 -->  
                    <image v-if="data.default" :src="data.default.bgImg" class="background-image"></image>  

                    <!-- 可拖拽的藏品 -->  
                    <movable-view direction="all" scale @change="(e:any) => handleDragChange(index,item, e)"  
                        v-for="(item,index) in addedCollections" :key="item.id" class="draggable-item" :x="item.x"  
                        :y="item.y" :width="item.width" :height="item.height" @scale="(e:any)=>onScale(item,e)"  

                        :scale-value="item.scale" scale-min='0.8' scale-max='2' :animation="false"  
                        :style="{ zIndex: item.zIndex, position: 'absolute' }" :data-id="item.id">  
                        {{item.scale}}  
                        <image :src="(item.thumbnail)" mode="widthFix" class="collection-img"  
                            :style="{width:'100px',height:'100px'}"></image>  
                    </movable-view>  
                </movable-area>  
            </view>  

            <!-- 右侧：藏品列表 -->  
            <view class="right-panel">  
                <text class="panel-title">我的藏品</text>  
                <view class="my-collections">  
                    <view class="collection-item" v-for="item in data.cpList" :key="item.id"  
                        @tap="addItemDirectly(item)">  
                        <image :src="(item.thumbnail)" mode="aspectFill" class="collection-img"  
                            :style="{width:'100px',height:'100px'}"></image>  
                    </view>  
                </view>  
            </view>  
        </view>  

        <!-- 底部操作按钮 -->  
        <view class="bottom-actions">  
            <button class="action-btn" @click="resetLayout">重置布局</button>  
            <button class="action-btn primary" @click="saveLayout">保存布局</button>  
        </view>  

    </view>  
</template>

操作步骤：

缩放到最大时候拖动x为0坐标，然后点击下面新增图片再重新动态上一个元素x=0，会远距离不等于0，只要不是最大就正常

预期结果：

没有bug

实际结果：

缩放到最大时候拖动x为0坐标，然后点击下面新增图片再重新动态上一个元素x=0，会远距离不等于0

bug描述：

movable-view 进行可拖拽和可缩放大小功能，缩放到最大时候拖动x为0坐标，然后再重新动态x=0，会远距离不等于0


更多关于movable-view 在uni-app中进行可拖拽和可缩放大小功能，缩放到最大时候拖动x为0坐标，然后再重新动态x=0，会远距离不等于0的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

小程序真机测试也有bug，拖拽会抖动，然后sacle默认写1.2直接也会抖动溜走

更多关于movable-view 在uni-app中进行可拖拽和可缩放大小功能，缩放到最大时候拖动x为0坐标，然后再重新动态x=0，会远距离不等于0的实战教程也可以访问 https://www.itying.com/category-93-b0.html


测试一下原生微信小程序是否也有同样的问题

现已修复这个bug，但是又出现了另外一个bug，sace放大到最大的状态，然后弄到x=0，然后新增图片，看元素上一个最大的坐标没变化，但是离开x不等于0

代码已更新，附件已更新

回复 1***@qq.com: 这个组件 uniapp 没有做啥特殊处理，有问题的话你可以先测试一下原生微信小程序是否有一样的问题

这是一个已知的movable-view组件在缩放和拖拽联动时的坐标计算问题。当元素缩放到最大值（scale-max=2）时，组件内部的坐标计算机制会出现偏差。

问题原因： 在最大缩放状态下，movable-view的坐标系计算可能基于缩放后的尺寸而非原始尺寸，导致设置x=0时实际位置偏移。

解决方案：

  1. 重置时强制刷新： 在设置x=0后，调用this.$forceUpdate()强制组件重新渲染。

  2. 使用nextTick延迟设置：

this.$nextTick(() => {
  item.x = 0;
  item.y = 0;
});
  1. 添加边界检查： 在handleDragChange中检查坐标值，当接近0时强制设置为0：
handleDragChange(index, item, e) {
  const { x, y } = e.detail;
  if (Math.abs(x) < 1) item.x = 0;
  if (Math.abs(y) < 1) item.y = 0;
}
回到顶部