1***@qq.com
1***@qq.com
  • 发布:2022-09-23 10:49
  • 更新:2022-09-23 10:49
  • 阅读:20

【报Bug】movable-view 缩放时页面显示错误

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

手机系统: 全部

手机机型: k40

页面类型: vue

vue版本: vue3

nvue编译模式: fast

打包方式: 离线

项目创建方式: HBuilderX

测试过的手机:

iphone13 iphone8 iphoneX 小米k40

示例代码:
<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,会导致缩放时赋值 错误(可查看附件图片)

好多天了,能帮我看一下吗

2022-09-23 10:49 负责人:无 分享
已邀请:

要回复问题请先登录注册