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


