uniapp图片放大缩小预览，并支持图片拖动附效果图-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp图片放大缩小预览，并支持图片拖动附效果图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：

uniapp图片放大缩小预览，并支持图片拖动附效果图

放大缩小和拖动是根据 movable-area 组件来实现的，小程序和uniapp都支持这个组件。

movable-area | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html

实现思路：

默认显示默认大小的图片，点击图片执行yulan事件从而显示放大缩小的组件，全屏显示该图片，并且能放大缩小和拖动图片。

下面上一个 uniapp 在h5场景的使用实现代码：

注：其它场景也可以根据这个思路实现，例如微信小程序


			<movable-area v-if="preview" scale-area class="movable-area">
				<movable-view class="movable-view" direction="all" scale="true"
					scale-min="1" scale-max="4" :scale-value="scale" @dblclick="dblclick">
					<image style="width:100%;" class="" src="https://t8.baidu.com/it/u=96305556,1111032089&fm=218&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=7BA38345CA621105781C74C90300C013&sec=1654707600&t=535dded2895f5349c5f6abdec4536f01" mode="widthFix"></image>
				</movable-view>
				<button @click="preview=false">返回直播</button>
			</movable-area>

<image @click="yulan"
 src="https://t8.baidu.com/it/u=96305556,1111032089&fm=218&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=7BA38345CA621105781C74C90300C013&sec=1654707600&t=535dded2895f5349c5f6abdec4536f01" mode="widthFix"></image>


		data() {
			return {
				scale: 1,
				current: '',
				preview: false,
            }
        },
		methods: {
			// 预览图片
			yulan(current) {
				this.current = current;
				this.scale = 1;
				this.preview = true;
			},

            //双击事件放大缩小
			dblclick() {
				if (this.scale == 4) {
					this.scale = 1;
				} else {
					this.scale = 4;
				}
			},
        }

css文章来源地址https://www.toymoban.com/news/detail-507941.html

.movable-area {
		position: fixed;
		z-index: 99999;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: #d8d8d8;
	}

	.movable-view {
		width: 100vw;
		height: 90vh;
		justify-content: center; /*子元素水平居中*/
		align-items: center; /*子元素垂直居中*/
		display: -webkit-flex;
	}

	.swiperImg {
		height: 80%;
	}

到了这里，关于uniapp图片放大缩小预览，并支持图片拖动附效果图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！