uni-app移动端图片预览组件 movable-area 、movable-view （支持缩放，拖动效果、替换部分代码图片可直接使用）

UniApp图片预览组件

利用uni-app官方<movable-area>、<movable-view>内置视图组件配合 uView 组件的u-popup 弹框组件共同实现封装的图片预览组件，支持手指缩放、拖动效果，替换代码中部分图片后可以直接使用。

效果图：

在这里插入图片描述

组件代码：

//图片预览组件代码
<template><u-popup :show="showPicPreview" mode="center" @close="close" @open="open"><view class="picPreview"><view class="closePicPreview" @tap="closePicPreviewHandle()"><image src="../../static/img/x.png" mode=""></image> //预览组件关闭隐藏按钮</view><movable-area scale-area><movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale"><image :src="previewUrl" mode="widthFix"></image> //需要展示的图片</movable-view></movable-area></view></u-popup>
</template>
<script>export default {name: "photo-preview",props: {//父组件控制显示showPicPreview: {type: Boolean,require: true,default: false},//父组件传入图片urlpreviewUrl: {type: String,default: ''},},data() {return {};},methods: {close() {},open() {},onScale() {},closePicPreviewHandle() {this.$emit('closePicPreviewHandle')}}}
</script><style lang="scss" scoped>.picPreview {position: relative;width: 750rpx;height: 100vh;z-index: 99999;background-color: rgba(0, 0, 0, 0.2);.closePicPreview {position: absolute;z-index: 99;right: 55rpx;top: 145rpx;width: 45rpx;height: 45rpx;image {width: 100%;height: 100%;}}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: calc(100% - 300rpx);}}
</style>//组件的调用方法
//页面中使用图片预览组件
<template>
<PhotoPreview :showPicPreview="showPicPreview" @closePicPreviewHandle="closePicPreviewHandle()" :previewUrl="previewUrl"></PhotoPreview>
//showPicPreview:控制预览组件的显示，
//previewUrl:传入需要预览显示的图片url，
//closePicPreviewHandle : 关闭当前弹出层的事件
</template>