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

相关推荐
人工智能训练师17 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny0717 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy18 小时前
css的基本知识
前端·css
昔人'18 小时前
css `lh`单位
前端·css
前端君18 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_61420 小时前
Web前端面试题(2)
前端
知识分享小能手20 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
00后程序员张20 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
蚂蚁RichLab前端团队21 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光21 小时前
css之一个元素可以同时应用多个动画效果
前端·css