移动端Vue.js的图片预览组件，支持放缩、滑动功能！

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

文档地址http://www.ml-ui.com/#/docs/i...

源码分享

组件参数

    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

同时推推自己开源的ml-ui移动端组件库
https://segmentfault.com/a/11...
git地址
ml-ui线上地址