- 发布:2022-09-23 10:49
- 更新:2022-09-23 10:49
- 阅读:89
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 12
HBuilderX类型: 正式
HBuilderX版本号: 3.5.3
手机系统: 全部
手机机型: k40
页面类型: vue
vue版本: vue3
打包方式: 离线
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<template>
<movable-area id="mapArea" style="width: 100%; height: 100%;background-color: white;position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 9999999;">
<movable-view
ref="mapView"
direction="all"
:x="mapX"
:y="mapY"
:scale="true"
:scale-value="mapScale"
:scale-min="mapScaleMin"
:scale-max="mapScaleMax"
style="position: relative; overflow: hidden"
:style="mapStyle"
@change="onchange"
@scale="onscale"
>
<view :style="rootStyle" :draggable="false" @tap="tap2">
<image src="https://ss.dev.yiyiny.com/cloudFarm/2022/09/01/00tdftpi7l5ucgpo.jpeg" style="width: 100vw;height: 100vh;"></image>
</view>
</movable-view>
</movable-area>
</template>
<script>
export default {
data() {
return {
oldScale:0,
mapX: 0,
mapY: 0,
mapScale: 1.2,
mapScaleMin: 1,
mapScaleMax: 2,
viewScale: 1,
mapStyle: 'width:100vw;height:100vh;',
rootStyle: '{width:100vw;height:100vh;transform-origin:0 0;transform:scale(0) translateZ(0)}',
// #ifdef MP-WEIXIN
root: undefined, // 微信小程序插槽兼容
// #endif
bg: false,
bgStyle: '',
bgStatus: {
bgScale: 1,
bgX: 0,
bgY: 0,
mapX: 0,
mapY: 0,
mapScale: 1
}
};
},
methods: {
tap2() {
this.$nextTick(function() {
this.mapScale = this.oldScale;
});
},
onChange: function(e) {
this.mapX = e.detail.x;
this.mapX = e.detail.y;
},
onScale: function(e) {
this.oldScale = e.detail.scale;
}
}
};
</script>
<style>
</style>
<template>
<movable-area id="mapArea" style="width: 100%; height: 100%;background-color: white;position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 9999999;">
<movable-view
ref="mapView"
direction="all"
:x="mapX"
:y="mapY"
:scale="true"
:scale-value="mapScale"
:scale-min="mapScaleMin"
:scale-max="mapScaleMax"
style="position: relative; overflow: hidden"
:style="mapStyle"
@change="onchange"
@scale="onscale"
>
<view :style="rootStyle" :draggable="false" @tap="tap2">
<image src="https://ss.dev.yiyiny.com/cloudFarm/2022/09/01/00tdftpi7l5ucgpo.jpeg" style="width: 100vw;height: 100vh;"></image>
</view>
</movable-view>
</movable-area>
</template>
<script>
export default {
data() {
return {
oldScale:0,
mapX: 0,
mapY: 0,
mapScale: 1.2,
mapScaleMin: 1,
mapScaleMax: 2,
viewScale: 1,
mapStyle: 'width:100vw;height:100vh;',
rootStyle: '{width:100vw;height:100vh;transform-origin:0 0;transform:scale(0) translateZ(0)}',
// #ifdef MP-WEIXIN
root: undefined, // 微信小程序插槽兼容
// #endif
bg: false,
bgStyle: '',
bgStatus: {
bgScale: 1,
bgX: 0,
bgY: 0,
mapX: 0,
mapY: 0,
mapScale: 1
}
};
},
methods: {
tap2() {
this.$nextTick(function() {
this.mapScale = this.oldScale;
});
},
onChange: function(e) {
this.mapX = e.detail.x;
this.mapX = e.detail.y;
},
onScale: function(e) {
this.oldScale = e.detail.scale;
}
}
};
</script>
<style>
</style>
操作步骤:
缩放页面 拖动 、反复测试
缩放页面 拖动 、反复测试
预期结果:
正常缩放,边界显示没有留白问题
正常缩放,边界显示没有留白问题
实际结果:
边界显示留白。
边界显示留白。
bug描述:
项目使用movable-view 缩放图片,在缩放过程中有概率会出现 缩放图片会留白 (现象可查看附件视频)
经排查是因为在缩放时 ,单纯使用定时器setTransfrom,会导致缩放时赋值 错误(可查看附件图片)
好多天了,能帮我看一下吗