功能：图片预览组件，支持双手指放大/缩小，双击放大/缩小，单击消失隐藏。

注:touch事件请手机预览

源码分享

组件参数

data() {

return {

loading: 2, // 1成功 2正在加载 3error失败

dragObject: {},

starLine: 0, // 初始俩个点第1次距离

zoom: 1, // 放缩比

compress: null, // 最大压缩比

elWidth: null, // 外层宽度

elHeight: null, // 外层高度

imgWidth: null, // 当前图片宽度

imgHeight: null, // 当前图片高度

mTop: 0, // margin-top 值

mLeft: 0, // margin-left 值

isTouch: false, // 是否touch

scrolling: false, // 是否放缩

animating: false, // 是否动画中

isTwoClick: false, // 是否双击

startTime: null, // 第一次时间

timeFunc: null, // 定时器

}

},

组件初始化init()，dom绑定事件，区分滑动事件、单击、双击事件

/**

* 初始化事件

* @param {Object} $el 当前DOM

*/

init($el) {

this.elWidth = document.documentElement.clientWidth

this.elHeight = document.documentElement.clientHeight

$el.addEventListener('touchstart', (e) => {

if (this.animating) return

// 记录点击时间和第二次点击的时差

if (this.startTime) this.dragObject.duration = new Date() - this.startTime

if (!this.startTime) this.startTime = new Date()

if (this.dragObject.duration) this.startTime = null

this.dragObject.startTime = new Date()

this.touchStart(e)

if (!this.isTouch) this.isTouch = e.touches.length > 1

})

$el.addEventListener('touchmove', (e) => {

....

})

$el.addEventListener('touchend', (e) => {

....

}

})

图片加载完后执行imgLoad()事件，设置图片初始显示的宽imgWidth高imgHeight以及放缩比compress

/**

* 图片加载成功事件

*/

imgLoad(e) {

const compress = e.target.width / this.elWidth

const scale = this.scale > 3 ? this.scale : 3

this.imgWidth = compress > 1 ? this.elWidth : e.target.width

this.imgHeight = compress > 1 ? e.target.height / compress : e.target.height

this.compress = compress > scale ? compress : scale

this.loading = 1

},

滑动开始，区分放缩事件or滑动事件

$el.addEventListener('touchmove', (e) => {

e.preventDefault()

if (this.animating) return

this.isTouch = true

if (e.touches.length === 2) this.touchTwoMove(e)

if (e.touches.length === 1) this.touchMove(e)

})

touchStart()滑动开始事件

/**

* 触发开发

*/

touchStart(e) {

const touch = e.touches[0]

if (e.touches.length > 1) {

// 放缩初始俩点的距离

const touch2 = e.touches[1]

const diffX = touch.pageX - touch2.pageX

const diffY = touch.pageY - touch2.pageY

this.starLine = Math.pow((diffX * diffX + diffY * diffY), 0.5)

}

// 缓存初始的margin-left和margin-top的比值

this.dragObject.topThan = this.mTop !== 0 ? this.mTop / this.reckonHeight(this.zoom) : 0

this.dragObject.leftThan = this.mLeft !== 0 ? this.mLeft / this.reckonWidth(this.zoom) : 0

this.dragObject.startLeft = touch.pageX

this.dragObject.startTop = touch.pageY

this.dragObject.zoom = this.zoom

}

touchMove()触发滑动事件

/**

* 触发移动

*/

touchMove(e) {

if (this.scrolling) return

const dragObject = this.dragObject

const touch = e.touches[0]

let xx = touch.pageX - (dragObject.oldLeft || dragObject.startLeft)

let yy = touch.pageY - (dragObject.oldTop || dragObject.startTop)

dragObject.oldLeft = touch.pageX

dragObject.oldTop = touch.pageY

if (this.imgWidth * dragObject.zoom > this.elWidth) {

if (Math.abs(this.mLeft) > this.reckonWidth(dragObject.zoom)) xx *= 0.3

this.mLeft += xx

}

if (this.imgHeight * dragObject.zoom > this.elHeight) {

if (Math.abs(this.mTop) > this.reckonHeight(dragObject.zoom)) yy *= 0.3

this.mTop += yy

}

},

touchEnd()触发结束事件,计算滑动后的位置，并执行动画事件continueTranslate()

/**

* 解发结束

* @param {Number} dragDuration 间隔

*/

touchEnd(dragDuration) {

....

this.continueTranslate(top, left, this.mLeft, this.mTop)

},

continueTranslate()动画事件,借助requestAnimationFrame()方法

/**

* 继续执行一段距离滑行

* @param {Number} top 将要到达的top值

* @param {Number} left 将要到达的left值

* @param {Number} oldX 动画执行前left值

* @param {Number} oldY 动画执行前top值

*/

continueTranslate(top, left, oldX, oldY) {

this.animating = true

const xx = left - oldX

const yy = top - oldY

let diffX = 0

let diffY = 0

let ALPHA = 0.88

const animationLoop = () => {

ALPHA *= 0.95

const resultX = Math.abs(diffX - xx) < 1

const resultY = Math.abs(diffY - yy) < 1

if (resultX && resultY) {

this.animating = false

this.mLeft = left

this.mTop = top

} else {

diffX = diffX * ALPHA + (1 - ALPHA) * xx

diffY = diffY * ALPHA + (1 - ALPHA) * yy

if (!resultX) this.mLeft = oldX + diffX

if (!resultY) this.mTop = oldY + diffY

animationFrame(animationLoop)

}

}

animationLoop()

},

touchTwoMove()放缩滑动事件

/**

* 放缩移动

*/

touchTwoMove(e) {

this.scrolling = true

const dragObject = this.dragObject

const touch = e.touches[0]

const touch2 = e.touches[1]

const diffX = touch.pageX - touch2.pageX

const diffY = touch.pageY - touch2.pageY

const line = Math.pow((diffX * diffX + diffY * diffY), 0.5) - this.starLine

let zoom = Number(dragObject.zoom + (line / 2 / 75))

if (zoom < 1) zoom = 1 - (1 - zoom) * 0.15

if (zoom > this.compress) zoom = this.compress + (zoom - 3) * 0.2

this.zoom = zoom

this.mLeft = dragObject.leftThan * this.reckonWidth(zoom)

this.mTop = dragObject.topThan * this.reckonHeight(zoom)

},

touchEnd()事件，当touches.length===0才执行事件，区分滑动事件、单击、双击事件。

$el.addEventListener('touchend', (e) => {

if (this.animating || e.touches.length > 0) return

const dragObject = this.dragObject

// 单次间隔时长

const duration = new Date() - this.dragObject.startTime

let zoom = this.zoom

if (this.isTouch) {

// 滑动事件

clearTimeout(this.timeFunc)

this.timeFunc = null

// 滑动执行事件

if (!this.scrolling) this.touchEnd(duration)

// 放缩执行事件

if (this.scrolling) {

if (zoom > this.compress) zoom = this.compress

if (zoom < 1) zoom = 1

if (dragObject.leftThan) this.mLeft = dragObject.leftThan * this.reckonWidth(zoom)

if (dragObject.topThan) this.mTop = dragObject.topThan * this.reckonHeight(zoom)

}

this.isTouch = false

this.zoom = zoom

this.scrolling = false

this.starLine = 0

this.dragObject = {}

} else {

// 俩次点击时长<250双击

if (dragObject.duration && dragObject.duration < 250) {

// 双击事件

clearTimeout(this.timeFunc)

this.timeFunc = null

this.zoom = zoom > 1 ? 1 : 2

this.mLeft = this.mTop = 0

this.dragObject = {}

} else {

// 单击事件

if (this.timeFunc) return

this.timeFunc = setTimeout(() => {

this.timeFunc = null

this.dragObject = {}

this.startTime = null

this.zoom = 1

this.mLeft = this.mTop = 0

this.$emit('input', false)

}, 250)

}

}

})

结束...

效果图

扫码预览

欢迎buging