效果圖：

放大縮小和拖動是根據(jù)?movable-area 組件來實現(xiàn)的，小程序和uniapp都支持這個組件。

movable-area | 微信開放文檔微信開發(fā)者平臺文檔https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html

實現(xiàn)思路：

默認(rèn)顯示默認(rèn)大小的圖片，點擊圖片執(zhí)行yulan事件從而顯示放大縮小的組件，全屏顯示該圖片，并且能放大縮小和拖動圖片。

下面上一個 uniapp 在h5場景的使用實現(xiàn)代碼：

注：其它場景也可以根據(jù)這個思路實現(xiàn)，例如微信小程序

			<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: {
			// 預(yù)覽圖片
			yulan(current) {
				this.current = current;
				this.scale = 1;
				this.preview = true;
			},

            //雙擊事件放大縮小
			dblclick() {
				if (this.scale == 4) {
					this.scale = 1;
				} else {
					this.scale = 4;
				}
			},
        }

css文章來源地址http://www.zghlxwxcb.cn/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%;
	}

到了這里，關(guān)于uniapp圖片放大縮小預(yù)覽，并支持圖片拖動附效果圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！