y***@outlook.com
y***@outlook.com
  • 发布:2022-01-20 15:16
  • 更新:2023-11-17 03:35
  • 阅读:689

【报Bug】movable-view的scale事件获取到的scale值不准确

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Microsoft Windows 10PRO x64

HBuilderX类型: 正式

HBuilderX版本号: 3.3.5

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: Redmi Note 10

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view>   
        <movable-area :style="{width: windowWidth+'px'}">  
            <movable-view  
                :damping="100"  
                :friction="1"  
                :scale="true"  
                :scale-max="4"  
                :scale-value="1"  
                :scale-min="1"  
                :out-of-bounds="false"  
                :animation="true"  
                direction="all"  
                @scale="onScale"  
                @change="onChange">  
                <text>左</text>  
                <text>中</text>  
                <text>右</text>  
            </movable-view>  
        </movable-area>  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                windowWidth: 0,  
                scaleValue: 0,  
            }  
        },  
        onLoad() {  
            const that = this;  
            uni.getSystemInfo({  
                success(res) {  
                    console.log("getSystemInfo",res)  
                    that.windowWidth = res.windowWidth;  
                }  
            })  
        },  
        methods: {  
            onScale(e){  
                this.scaleValue = e.detail.scale  
                console.log("onScale",this.scaleValue)  
            },  
            onChange(e){  
                this.swiper = false;  
                const detailX = e.detail.x;  
                // 拖动放大后的movable-view,使detailX值达到最小,按照下面的方法计算出真实缩放值  
                // 真实缩放值 = ( 窗口宽度 + detailX的绝对值 ) / 窗口宽度  
                // realScaleValue = ( windowWidth + |detailX| ) / windowWidth  
                const realScaleValue = (this.windowWidth + Math.abs(detailX)) / this.windowWidth;  
                console.log(`onChange detailX=${detailX}, scaleValue=${this.scaleValue}, realScaleValue=${realScaleValue}`)  
            }  
        }  
    }  
</script>  
<style>  
    movable-view {  
        display: flex;  
        align-items: center;  
        justify-content: space-around;  
        height: 400rpx;  
        width: 100%;  
        background-color: #007AFF;  
        color: #fff;  
    }  
    movable-area {  
        height: 100vh;  
        background-color: #D8D8D8;  
        overflow: hidden;  
    }  
</style>  

操作步骤:

使用HBuilderX创建一个空项目,创建一个页面,用示例代码替换自动生成的页面代码。使用真机运行,双指放大movable-view后,手指从右向左滑动至不能继续滑动,观察终端输出中的scaleValue和realScaleValue

预期结果:

movable-view的scale回调中获取到的scale值,能够用来计算出准确的movable-view被缩放后的大小,或者计算出尽可能的精确值

实际结果:

movable-view的scale回调中获取到的scale值,计算出的movable-view被缩放后的大小与实际大小相差过大

bug描述:

movable-view的scale事件获取到的scale值不准确
控制台输出

2022-01-20 15:16 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com - yuan

兄弟,这个问题解决了吗

要回复问题请先登录注册