uni-app预览图片-图片设置双指或双击放大缩小

主要用到的 弹框uni-popup   弹出图片  ，然后弹出的图片 movable-area 设置双指或双击放大缩小

<!-- start点击大图弹框 -->

<!-- 插屏弹窗 -->

<uni-popup ref="showimage" :type="type" :mask-click="true" @change="change">

<view class="uni-image imagecontent">

<movable-area scale-area class="movable-area">

    <movable-view

        class="movable-view"

        direction="all"

        @scale="onScale"

        scale="true"

        scale-min="0.5"

        scale-max="10"

        :scale-value="scale"

    >

        <image

            class="lookimg"

            :src="images"

            mode="widthFix"

        ></image>

    </movable-view>

</movable-area>

<!-- <image class="image" :src="images" mode="widthFix" /> -->

<!-- <view class="uni-image-close" @click="cancel('image')">

<uni-icons type="clear" color="#fff" size="30" />

</view> -->

</view>

</uni-popup>

<!-- end查看示例 -->

 

 

 

<style>

/* 双指缩放图片 */

.movable-view {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

    width: 100%;

    text-align: center;

}

 

.movable-area {

    height:100%;

    width: 730rpx;

    position: fixed;

    overflow: hidden;

}

 

.movable-view image {

    width: 100%;

}

.lookimg {

    display: block;

    position: fixed;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    margin: auto;

}

.imagecontent {

    width: 100%;

    height: 100%;

   /* background: rgba(0, 0, 0, 1); */

    top: 0;

    position: fixed;

left:0;

display: flex;

align-items: center;

justify-content: center;

}

</style>

官方文档组件：https://uniapp.dcloud.io/component/movable-view?id=movable-view