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

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

相关推荐
菜鸟‍21 分钟前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js
小光学长41 分钟前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
huangql5201 小时前
截图功能技术详解:从原理到实现的完整指南
前端·html5
长空任鸟飞_阿康1 小时前
Node.js 核心模块详解:fs 模块原理与应用
前端·人工智能·ai·node.js
这儿有一堆花2 小时前
网站链接重定向原理
前端
cecyci2 小时前
如何实现AI聊天机器人的打字机效果?
前端·javascript
IT_陈寒2 小时前
Vite 5个隐藏技巧让你的项目构建速度提升50%,第3个太香了!
前端·人工智能·后端
詩句☾⋆᭄南笙2 小时前
HTML的盒子模型
前端·html·盒子模型
落言2 小时前
AI 时代的工程师:懂,却非懂的时代
前端·程序员·架构
一枚攻城狮2 小时前
前端知识点大汇总
前端