uniapp 做一个查看图片的组件，图片可缩放移动

因为是手机端，所以需要触摸可移动，双指放大缩小。

首先在components里建个组件

查看图片使用 uni-popup 弹窗

要注意 transform的translate和scale属性在同一标签上不会一起生效

移动就根据触摸效果进行偏移图片

缩放就根据双指距离的变大变小进行缩放

<template><view><uni-popup style="z-index: 99998;" ref="showImage" type="center"><view :style="{'transform':'translate('+x+'px,'+y+'px)'}"><img:style="{'transform':'scale(' + scale +')','height': height + 'px'}"@touchstart="touchstart"@touchmove="touchmove"@touchend="touchend"@touchcancel="touchcancel"mode="aspectFit":src="src"></img></view><view class="closePopup" @click="close"><uni-icons type="closeempty" size="32" color="#fff"></uni-icons></view></uni-popup></view>
</template><script>export default {name:"selectImage",data() {return {height: 0,src: '',x: 0,y:0,clientX: 0,clientY: 0,moveX: 0,moveY: 0,touchType: 0, // 0为单指触摸  1为双指// 初始双指距离distance: 0,// 初始缩放比例scale: 1};},created() {const me = thisuni.getSystemInfo({success(res) {// 默认图片高度占屏幕一半展示me.height = res.windowHeight / 2}})},methods: {// 获取两点距离getDistance (point1, point2) {const x = point1.clientX - point2.clientXconst y = point1.clientY - point2.clientYreturn Math.sqrt(x*x + y*y)},// 触摸开始touchstart (e) {// 当触摸事件为一个时if (e.touches.length === 1) {// 记录开始触摸位置this.clientX = e.changedTouches[0].clientXthis.clientY = e.changedTouches[0].clientYthis.touchType = 0} else if (e.touches.length === 2) {// 双指进行放大缩小操作this.touchType = 1// 获取双指距离this.distance = this.getDistance(e.touches[0], e.touches[1])}},// 触摸移动中touchmove (e) {// 当触摸事件为一个时if (this.touchType === 0) {// 记录移动的距离 const moveX = e.changedTouches[0].clientX - this.clientXconst moveY = e.changedTouches[0].clientY - this.clientY// 最终偏移距离为初始偏移距离+当前偏移距离this.x = this.moveX + moveXthis.y = this.moveY + moveY} else if (this.touchType === 1) {// 双指进行放大缩小操作if (e.touches.length === 2) {// 获取移动后的双指距离const le = this.getDistance(e.touches[0], e.touches[1])// 最终放大 缩小效果为 初始放大缩小比例 * 当前放大缩小比例const bl = le / this.distanceconst scale = this.scale * blthis.scale = scale > 0.1 ? scale : 0.1// 随着移动将开始的位置重置 不然会一次性放很大 或者缩很小，不好控制this.distance = le}}},// 触摸结束touchend (e) {// 当触摸事件为一个时if (this.touchType === 0) {// 记录最终移动距离const moveX = e.changedTouches[0].clientX - this.clientXconst moveY = e.changedTouches[0].clientY - this.clientY// 最终偏移距离为初始偏移距离+当前偏移距离this.x = this.moveX + moveXthis.y = this.moveY + moveY// 当前偏移距离设置为当前位置this.moveX = this.xthis.moveY = this.y} else if (this.touchType === 1) {// 当双指松开后console.log(e)}},// 因电话等打断时触发touchcancel (e) {if (this.touchType === 0) {this.x = 0this.y = 0} else {this.clientX = 0this.clientY = 0this.moveX = 0this.moveY = 0this.touchType = 0 // 0为单指触摸  1为双指// 初始双指距离this.distance = 0// 初始缩放比例this.scale = 1}},open () {this.$refs.showImage.open()},close () {this.x = 0this.src = ''this.y = 0this.clientX = 0this.clientY = 0this.moveX = 0this.moveY = 0this.touchType = 0 // 0为单指触摸  1为双指// 初始双指距离this.distance = 0// 初始缩放比例this.scale = 1this.$refs.showImage.close()}}}
</script><style>.closePopup {position: fixed;top: 40px;right: 40px;width: 50px;height: 50px;text-align: center;line-height: 50px;z-index: 99999;}
</style>

外面组件调用时引用或者全局注册后使用

外面图片上加个点击事件

 @click="look(url)"

方法直接调用组件open方法就OK了。

look (url) {this.$refs.showImg.src = urlthis.$refs.showImg.open()},

效果图：

---------------查看-------------------------------移动------------------------------缩放