uniapp 小程序图片放大缩小

<swiper class="swiper-box" :duration="duration" circular :current="current" @change="changePhotos">
                        <swiper-item v-for="(item,index) of urls" :key="index">
                            <view class="img-box">
                                <movable-area scale-area class="movable-area">
                                    <movable-view class="movable-view" direction="all" scale="true" scale-min="1"
                                        scale-max="4" :scale-value="scale" @dblclick="dblclick">
                                        <image class="img" show-menu-by-longpress :src="item" mode="widthFix"></image>
                                    </movable-view>
                                </movable-area>
                            </view>
                        </swiper-item>
                    </swiper>

data() {
            return {
                scale: 1,
                current: '',
                preview: false,
            }
        },
        methods: {
 
                       //双击事件放大缩小
            dblclick() {
                if (this.scale == 4) {
                    this.scale = 1;
                } else {
                    this.scale = 4;
                }
            },
        }

.movable-area {
            width: 100vw;
            height: 100vh;
            // background-color: #d8d8d8;
        }
     
        .movable-view {
            width: 100vw;
            height: 100vh;
            justify-content: center; /*子元素水平居中*/
            align-items: center; /*子元素垂直居中*/
            display: -webkit-flex;
        }