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

客官°小女子只卖身不卖艺 2023-06-15 11:04 10阅读 0赞

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

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

html代码

需要说一下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图片如何设置双指放大缩小

![Alt][]

放大后(可上上下下左左右右BABA拖动 拖动 )  
uni-app图片如何设置双指放大缩小  
![在这里插入图片描述][20191122002553861.jpg_pic_center]

希望这边文章对您有帮忙

[Alt]: https://img-blog.csdnimg.cn/20191122002522171.jpg#pic_center
[20191122002553861.jpg_pic_center]: https://img-blog.csdnimg.cn/20191122002553861.jpg#pic_center