6***@qq.com
6***@qq.com
  • 发布:2020-03-24 16:47
  • 更新:2020-03-30 16:04
  • 阅读:891

【报Bug】movable-view发布支付宝小程序 放大图片再移动,图片会变成初始状态; change事件里添加更新data里的代码就会异常,如用原生支付宝小程序则正常

分类:uni-app

详细问题描述

movable-view发布支付宝小程序 change事件里添加更新data里的代码,放大图片再移动,图片会变成初始状态;change事件里代码加上就异常,注释掉就正常,很奇怪。如用原生支付宝小程序则正常,

重现步骤

[步骤] 放大图片再移动图片,图片会变成初始状态

[结果]放大图片再移动,图片会变成初始状态

[期望]放大图片再移动,以最后的放大后移动后状态为准

IDE运行环境说明

HBuilderX

[IDE版本号]2.6.5.20200314

[windows版本号] 1903 win10家庭中文版 操作系统版本18362.720

uni-app运行环境说明

支付宝小程序

[运行端版本号]支付宝小程序开发工具 V 1.5.10

[HBuilderX创建]

[编译模式说明] HBuilderX uni-app默认的编译模式

App运行环境说明

[Android版本号] 9

[手机型号] 荣耀8X JSN-AL00a

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

<template>  
    <view>  
        <movable-area style="width:450rpx;height:600rpx;overflow:hidden">  
            <movable-view  
                @change="moveChange"  
                @scale="scaleChange"  
                scale-min="1"  
                :x="imgX"  
                :y="imgY"  
                :style="{ width: imgW + 'rpx', height: imgH + 'rpx' }"  
                direction="all"  
                scale="true"  
            >  
                <image mode="aspectFit" :style="{ width: imgW + 'rpx', height: imgH + 'rpx' }" :src="photoSrc"></image>  
            </movable-view>  
        </movable-area>  
    </view>  
</template>  

<script>  
import imgUrl from '../../image/rsf20031129DE8FF11AF947C587F48181023F85A8.jpg';  
export default {  
    data() {  
        return {  
            imgX: 0,  
            imgY: 0,  
            imgW: 497,  
            imgH: 600,  
            photoSrc: imgUrl,  

            newImgX: 0,  
            newImgY: 0  
        };  
    },  
    methods: {  
        moveChange(e) {  
            console.log(e.detail);  
            this.newImgX = e.detail.x;  
        },  
        scaleChange(e) {  
            console.log(e);  
        }  
    }  
};  
</script>  

<style>  
.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  

.logo {  
    height: 200rpx;  
    width: 200rpx;  
    margin-top: 200rpx;  
    margin-left: auto;  
    margin-right: auto;  
    margin-bottom: 50rpx;  
}  

.text-area {  
    display: flex;  
    justify-content: center;  
}  

.title {  
    font-size: 36rpx;  
    color: #8f8f94;  
}  
</style>  

完整代码见附件、异常现象视频见附件
[QQ] 664336285

2020-03-24 16:47 负责人:无 分享
已邀请:
6***@qq.com

6***@qq.com (作者)

都没有这个问题?

该问题目前已经被锁定, 无法添加新回复