uni-app图片如何设置双指放大缩小

图片设置双指放大缩小这个功能相对来说比较简单的,是用于官方文档的路径(组件->视图容器->movable-area),movable-area可以做双指放大缩小,并且放大的同时可以左右移动图片(页面),至于怎么做呢?

用HBuilder X编辑器创建个uni-app项目

html代码

<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代码的

剩下的就是css代码了

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%;
}

效果

拖动前
uni-app图片如何设置双指放大缩小

 

放大后(可上上下下左左右右BABA拖动 拖动 )
uni-app图片如何设置双指放大缩小

希望这边文章对您有帮助

本站资源除特别声明外,转载文章请声明文章出处
东泰博客 » uni-app图片如何设置双指放大缩小

发表评论

切图仔日常笔记博客