<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>
- 发布:2022-01-20 15:16
- 更新:2023-11-17 03:35
- 阅读:689
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Microsoft Windows 10PRO x64
HBuilderX类型: 正式
HBuilderX版本号: 3.3.5
手机系统: Android
手机系统版本号: Android 11
手机厂商: 小米
手机机型: Redmi Note 10
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
使用HBuilderX创建一个空项目,创建一个页面,用示例代码替换自动生成的页面代码。使用真机运行,双指放大movable-view后,手指从右向左滑动至不能继续滑动,观察终端输出中的scaleValue和realScaleValue
使用HBuilderX创建一个空项目,创建一个页面,用示例代码替换自动生成的页面代码。使用真机运行,双指放大movable-view后,手指从右向左滑动至不能继续滑动,观察终端输出中的scaleValue和realScaleValue
预期结果:
movable-view的scale回调中获取到的scale值,能够用来计算出准确的movable-view被缩放后的大小,或者计算出尽可能的精确值
movable-view的scale回调中获取到的scale值,能够用来计算出准确的movable-view被缩放后的大小,或者计算出尽可能的精确值
实际结果:
movable-view的scale回调中获取到的scale值,计算出的movable-view被缩放后的大小与实际大小相差过大
movable-view的scale回调中获取到的scale值,计算出的movable-view被缩放后的大小与实际大小相差过大
bug描述:
movable-view的scale事件获取到的scale值不准确
1 个回复
1***@qq.com - yuan
兄弟,这个问题解决了吗