一 、实现思路及代码

1.template

• 图片设置双指放大缩小这个功能相对来说比较简单的，官方文档即可实现
• (组件->视图容器->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"
                @click="dblclick"
            >
                <image
                    class="lookimg"
                    src="../../../static/clouddisk/lookimg.jpg"
                    mode="heightFix"
                ></image>
            </movable-view>
        </movable-area>
    </view>

2. script

• 如果 scale-min=“0.5” 的话那图片就会显示50%，不会完全100%显示，所以就让他初始化等于 1 scale-max 他的意思是双指放大可以放大几倍，比如 scale-max=“4” 那么双指放大4倍。

<script>
export default {
    data() {
        return {
            scale: 1,
            touchNum：0
        };
    },
    methods: {
        dblclick() {
	this.touchNum++
        setTimeout(() => {
		if (this.touchNum == 1) {
                    console.log('单击')
		}
		if (this.touchNum >= 2) {
                    console.log('双击')
                    if (this.scale == 10) {
                            this.scale = 1;
			} else {
                            this.scale = 10;
			}
                    }
		this.touchNum = 0
	}, 250)
    },
};
</script>

js里面写的是单击转双击事件，因为scale的最大值是10，最小值是1，所以如果双击的时候，如果他的值是10，那么久变成1那么大，反之则反。

3. style

<style>
.movable-view {
		height: 100%;
		width: 100%;
	}

.movable-area {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

.lookimg {
		width: 100%;
		height: 100%;
	}

.imagecontent {
		width: 50%;
		height: 100vh;
		margin: 0 40rpx;
	}
</style>