uni |
您所在的位置:网站首页 › hbuilder怎么放大图片 › uni |
图片设置双指放大缩小这个功能相对来说比较简单的,是用于官方文档的路径(组件->视图容器->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图片如何设置双指放大缩小 放大后(可上上下下左左右右BABA拖动 拖动 ) uni-app图片如何设置双指放大缩小 希望这边文章对您有帮忙 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |