页面双指缩放操作出现 Uncaught TypeError: Cannot read property 'x' of null at view.umd.min.js:6

5***@qq.com

movable-area 里面scroll-view 无效，超出边界模式 也无法滚动超大图片， 能不能给个示例 可以不限制超出边界的

2021-12-01 17:43

5***@qq.com

<template>

<view class="page-body">

        <movable-area scale-area>  



            <movable-view  out-of-bounds @scale="onScale" scale scale-min="0.01" scale-max="4" :scale-value="scale">  



                         <scroll-view scroll-x scroll-y style="width: 750rpx; height: 100vh;">  

                 <view style="width: 10000rpx; height: 10000rpx; background-color: #0066CC;"></view>  

                        </scroll-view>      

            </movable-view>  



        </movable-area>  



    </view>  

</view>  

</template>

<script>

export default {  



    data() {  

        return {  



            x: 0,  

            y: 0,  



            old: {  

                x: 0,  

                y: 0,  

                scale: 1,  



            },  

            scale: 1,//页面的比例  

            distance: 0,//手指移动的距离  

            disX:0,  

            disY:0,  

            positionX:0,  

            positionY:0,  

            ischongfu:0  

        }  

    },  

    onLoad() {  



            },  

    methods: {  

        tap: function(e) {  

            // 解决view层不同步的问题  

            this.x = this.old.x  

            this.y = this.old.y  

            this.$nextTick(function() {  

                this.x = 30  

                this.y = 30  

            })  

        },  

        tap2() {  

            // 解决view层不同步的问题  

            this.scale = this.old.scale  

            this.scale = this.old.scale  

            this.$nextTick(function() {  

                this.scale = 3  

            })  

        },  

        onChange: function(e) {  

            this.old.x = e.detail.x  

            this.old.y = e.detail.y  

        },  

        onScale: function(e) {  

            this.old.scale = e.detail.scale  

        }   

    }  

}  

</script>

<style>

movable-view {

    background-color: #007AFF;  

    color: #fff;  

}  



movable-area {  

    height: 100vh;  

    width: 100%;  

    background-color: #D8D8D8;  

    overflow: hidden;  

}  



.max {  

    width:500rpx;  

    height: 500rpx;  

}  

</style>

2021-12-01 17:46