uni-app图片设置双指或双击放大缩小

关注

最新推荐文章于 2026-01-07 11:52:15 发布 · 6.3k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

uniapp——点击图片放大预览点击图片放大预览效果图： <template> <view class="content"> <image class="logo" src="/static/logo.png" @click="clickImg"></image> </view> </template> <script> export default { data() { return { title: 'Hello', 阅读详情

图片设置双指放大缩小这个功能相对来说比较简单的，是用于官方文档的路径(组件->视图容器->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>