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

前端白袍2024-02-02 14:34

UniApp图片预览组件

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

效果图：

组件代码：

c 复制代码

//图片预览组件代码
<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
			},
			//父组件传入图片url
			previewUrl: {
				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>

提示：注意，组件的要注册后再使用，切记！！

官方链接：

movable-area