圖片設置雙指放大縮小這個功能相對來說比較簡單的,是用於官方文檔的路徑(組件->視圖容器->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%;
}