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

相关推荐
一只小风华~1 分钟前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号3 分钟前
【大前端】前端生成二维码
前端·二维码
2501_9159184126 分钟前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
程序员码歌32 分钟前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康1 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏2 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹3 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6