uni-app图片设置双指或双击放大缩小
uniApp图片设置双指或者双击放大缩小
·
图片设置双指放大缩小这个功能相对来说比较简单的,是用于官方文档的路径(组件->视图容器->movable-area),movable-area可以做双指放大缩小
<view class="imagecontent">
<movable-area scale-area class="movable-area">
<movable-view
class="movable-view"
direction="all"
@scale="onScale"
scale="true"
scale-min="1"
scale-max="4"
:scale-value="scale"
@dblclick="dblclick"
>
<image
class="lookimg"
src="../../../static/clouddisk/lookimg.jpg"
mode="widthFix"
></image>
</movable-view>
</movable-area>
</view>
如果 scale-min=“0.5” 的话那图片就会显示50%,不会完全100%显示,所以就让他初始化等于 1
scale-max 他的意思是双指放大可以放大几倍,比如 scale-max=“4” 那么双指放大4倍。
<script>
export default {
data() {
return {
scale: 1,
};
},
methods: {
dblclick() {
if (this.scale == 10) {
this.scale = 1;
} else {
this.scale = 10;
}
},
},
};
</script>
这个js里面写的是双击事件,就做一个判断,因为scale的最大值是10,最小值是1,所以如果双击的时候,如果他的值是10,那么久变成1那么大,反之则反。
最后就是style的样式。
<style>
.movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
100%;
text-align: center;
}
.movable-area {
height: 100%;
100%;
position: fixed;
overflow: hidden;
}
.movable-view image {
100%;
}
.lookimg {
display: block;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.imagecontent {
100%;
height: 100%;
background: rgba(0, 0, 0, 1);
top: 0;
position: fixed;
}
</style>
官方文档组件:https://uniapp.dcloud.io/component/movable-view?id=movable-view
更多推荐
已为社区贡献1条内容
所有评论(0)