uni-app movable-view的scale事件获取到的scale值不准确

uni-app movable-view的scale事件获取到的scale值不准确 产品分类: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>  

更多关于uni-app movable-view的scale事件获取到的scale值不准确的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

兄弟,这个问题解决了吗

更多关于uni-app movable-view的scale事件获取到的scale值不准确的实战教程也可以访问 https://www.itying.com/category-93-b0.html


关于 movable-view scale 事件返回的 scale 值不准确的问题,从您的代码和描述来看,核心原因在于您对 realScaleValue 的计算方式存在误解。

movable-view 的缩放默认以两指触摸中心点为缩放中心,并非以 movable-view 的左边框或左上角为原点。您用 detailX 计算真实缩放值:

realScaleValue = (windowWidth + |detailX|) / windowWidth
回到顶部