uni-app movable-view重新定义xy初始化

uni-app movable-view重新定义xy初始化

开发环境 版本号 项目创建方式
Windows window11 HBuilderX

操作步骤：

  • 当我在movable-view缩小到最小的时候，重新定义其x坐标以及y坐标会导致视图缩放比例重新到初始化状态

预期结果：

  • 视图缩放比例不更新，跳到定位的坐标位置

实际结果：

  • 视图缩放比例更新，未跳到指定位置

bug描述：

  • 当我在movable-view缩小到最小的时候，重新定义其x坐标以及y坐标会导致视图缩放比例重新到初始化状态

App下载地址或H5网址：


更多关于uni-app movable-view重新定义xy初始化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

提供复现工程吧，并简单对比 web/微信小程序的差异，也说明你的 vue 和 HBuilderX 依赖版本
我使用 vue3+HBuilderX4.54 运行下面代码到 web ，依次点击缩小和重置，运行结果复合预期。后续提问请给予我的 demo 进行修改，描述你的修改步骤。提供更多信息，有助于定位和解答你的问题。
<template>
<view class="page-body">
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
示例 7
<text>\n可放缩</text>
</view>
<movable-area scale-area>
<movable-view :x=“x” :y=“y” direction=“all” @scale=“onScale”
@change=‘onChange’
scale scale-min=“0.5” scale-max=“4” :scale-value=“scale”>text</movable-view>
</movable-area>
<view @tap=“tap2” class=“uni-link uni-center uni-common-mt” style=“padding-bottom:80rpx;”>
点击这里放大3倍
</view>
<button @tap=“tap05”>缩小到最小0.5</button>
<button @tap=“move”>重置100，100</button>
</view>
</view>
</template>

<script> export default { data() { return { x: 0, y: 0, scale: 2, old: { x: 0, y: 0, scale: 2 } } }, methods: { move(e){ this.x = this.old.x this.y = this.old.y this.$nextTick(function() { this.x = 100 this.y = 100 }) }, tap: function(e) { // 解决view层不同步的问题 this.x = this.old.x this.y = this.old.y this.$nextTick(function() { this.x = 30 this.y = 30 }) }, tap05(){ // 解决view层不同步的问题 this.scale = this.old.scale this.$nextTick(function() { this.scale = 0.5 }) }, tap2() { // 解决view层不同步的问题 this.scale = this.old.scale this.scale = this.old.scale this.$nextTick(function() { this.scale = 3 }) }, onChange: function(e) { console.log('changed'); this.old.x = e.detail.x this.old.y = e.detail.y }, onScale: function(e) { // console.log(4,e) // e.detail.scale changed const _scale = e.detail.scale if(_scale===0.5){ console.log('缩放到最小了'); } this.old.scale = e.detail.scale } } } </script> <style> movable-view { display: flex; align-items: center; justify-content: center; height: 150rpx; width: 150rpx; background-color: #007AFF; color: #fff; } movable-area { height: 300rpx; width: 100%; background-color: #D8D8D8; overflow: hidden; } .max { width:500rpx; height: 500rpx; } </style>

更多关于uni-app movable-view重新定义xy初始化的实战教程也可以访问 https://www.itying.com/category-93-b0.html


hbuildx版本为4.45 vue版本为3 小程序上没有问题web上面有我说明的问题

看我更新，我提供了复现工程，基于我的修改说明你的问题

这是一个关于uni-app中movable-view组件缩放和坐标重置的问题。从描述来看，当缩放最小化后重新设置x/y坐标时，视图会意外重置缩放比例。

问题分析：

  1. movable-view组件在缩放状态下改变坐标时，确实会触发视图重置
  2. 这是movable-view组件的一个已知行为特性，不是bug

解决方案建议：

  1. 可以通过监听touch事件手动控制缩放和位置
  2. 使用transform缩放替代movable-view的scale属性
  3. 在修改坐标前先记录当前scale值，修改后再恢复

关键代码示例：

// 记录当前缩放值
let currentScale = this.scaleValue;

// 修改坐标
this.x = newX;
this.y = newY;

// 恢复缩放
this.$nextTick(() => {
  this.scaleValue = currentScale;
});
回到顶部