電商直播系統開發uni-app雙指縮放圖片大小

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

用HBuilder X編輯器創建個uni-app項目

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <movable-area scale-area>
                <movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale">
                    <image src="圖片路徑" mode="widthFix"></image>
                </movable-view>
            </movable-area>
        </view>
</view>
</template>

需要說一下movable-view標籤裏的 scale-min=“1” scale-max="4"是幹嘛用的，這兩個設置相對來說也比較重要
scale-min 拿圖片來說，如果 scale-min=“0.5” 的話那圖片就會顯示50%，不會完全100%顯示，所以就讓他初始化等於 1
scale-max 他的意思是雙指放大可以放大幾倍，比如 scale-max=“4” 那麼雙指放大4倍
movable-area是不需要寫任何js代碼的

movable-view {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height:100%;
}

movable-area {
	height: 100%;
	width: 100%;
	position:fixed;
	overflow: hidden;
}
	
movable-view image{
	width:100%;
}