uni-app圖片設置雙指或雙擊放大縮小

圖片設置雙指放大縮小這個功能相對來說比較簡單的，是用於官方文檔的路徑(組件->視圖容器->movable-area)，movable-area可以做雙指放大縮小

<view class="imagecontent">
        <movable-area scale-area class="movable-area">
            <movable-view
                class="movable-view"
                direction="all"
                @scale="onScale"
                scale="true"
                scale-min="1"
                scale-max="4"
                :scale-value="scale"
                @dblclick="dblclick"
            >
                <image
                    class="lookimg"
                    src="../../../static/clouddisk/lookimg.jpg"
                    mode="widthFix"
                ></image>
            </movable-view>
        </movable-area>
    </view>

如果 scale-min=“0.5” 的話那圖片就會顯示50%，不會完全100%顯示，所以就讓他初始化等於 1
scale-max 他的意思是雙指放大可以放大幾倍，比如 scale-max=“4” 那么雙指放大4倍。

<script>
export default {
    data() {
        return {
            scale: 1,
        };
    },
    methods: {
        dblclick() {
            if (this.scale == 10) {
                this.scale = 1;
            } else {
                this.scale = 10;
            }
        },
    },
};
</script>

　　這個js里面寫的是雙擊事件，就做一個判斷，因為scale的最大值是10，最小值是1，所以如果雙擊的時候，如果他的值是10，那么久變成1那么大，反之則反。

  最后就是style的樣式。

<style>
.movable-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
}

.movable-area {
    height: 100%;
    width: 100%;
    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;
}
</style>

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