uni-app movable-view放大时触发@scale事件，其event里的detail.x 和 detail.y值不变化，detail.scale值正常

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app movable-view放大时触发@scale事件，其event里的detail.x 和 detail.y值不变化，detail.scale值正常

开发环境 版本号 项目创建方式
Windows 详见微信版本号 HBuilderX

示例代码：

<template>  
    <view class="page-body">  
        <movable-area class="movableArea">  
            <movable-view class="movableView" direction="all" :x="x" :y="y" :scale-min="1" @change="onChange" @scale="onScale" scale>  
                <div>x: {{x}}</div>  
                <div>y: {{y}}</div>  
                <div>scale: {{scale}}</div>  
            </movable-view>  
        </movable-area>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
          x: 0,  
          y: 0,  
          scale: 1,  
        }  
    },  
    methods: {  
            onChange({ detail }) {  
                const { y, x } = detail;  
                this.x = x;  
                this.y = y;  
            },  
            onScale(event){  
                console.log(event);  
                const { detail } = event;  
                const { scale, y, x } = detail;  
                this.x = x;  
                this.y = y;  
                this.scale = scale;  
            }  
    }  
}  
</script>  

<style lang="less" scoped>  
    .movableArea {  
        width: 500rpx;  
        height: 500rpx;  
        background-color: pink;  
        user-select: none;  
        .movableView {  
            width: 200rpx;  
            height: 200rpx;  
            background-color: aqua;  
        }  
    }  
</style>

操作步骤：

用手机打开，双指放大缩小，注意X与Y的变化。 移动时XY是正常的，缩放时XY 偶发性 XY数值不更新

预期结果：

缩放时XY数据也是随动的。

实际结果：

缩放时XY数据偶发性不会变化。

bug描述：

movable-view组件放大时触发@scale，其event里的detail.x 和 detail.y不会变化。 detail.scale是正常的


Harmonyos Next教程
4 回复

官方人呢？


H5环境

解决了吗

在uni-app中，movable-view组件用于创建一个可移动的视图容器，它支持拖动、缩放等操作。对于你提到的在缩放时@scale事件中的detail.x和detail.y值不变化的问题，这通常是因为detail.x和detail.y代表的是movable-view的位置信息，而非缩放中心或缩放比例信息。缩放比例是由detail.scale提供的，而detail.x和detail.y反映的是视图容器在父容器中的位置。

以下是一个简单的代码示例，展示了如何使用movable-view并监听@scale事件，同时输出缩放比例和位置信息：

<template>
  <view class="container">
    <movable-view
      class="movable"
      direction="all"
      scale="true"
      scale-min="0.5"
      scale-max="3"
      @scale="onScale"
    >
      <view class="content">缩放我</view>
    </movable-view>
  </view>
</template>

<script>
export default {
  methods: {
    onScale(event) {
      console.log('缩放事件触发');
      console.log('缩放比例:', event.detail.scale);
      console.log('当前位置 x:', event.detail.x);
      console.log('当前位置 y:', event.detail.y);
    }
  }
}
</script>

<style>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.movable {
  width: 200px;
  height: 200px;
  background-color: #4caf50;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.content {
  width: 100%;
  height: 100%;
}
</style>

在这个例子中，movable-view被设置为可以沿所有方向移动并支持缩放。当用户进行缩放操作时，@scale事件会被触发，并在控制台输出当前的缩放比例（detail.scale）以及movable-view的位置（detail.x和detail.y）。

如果你发现detail.x和detail.y在缩放过程中没有变化，这通常意味着movable-view的位置在缩放时保持不变，这是正常的行为，除非你在缩放的同时手动改变了它的位置。如果确实需要监控或修改缩放中心，你可能需要查看uni-app的官方文档或社区，看是否有相关API或工作区可以调整缩放中心点的行为。但基于movable-view的当前设计，detail.x和detail.y反映的是位置而非缩放中心。

回到顶部