cover-image加载得图片不能在安卓手机上滑动
发布于 8 年前 作者 lima 9370 次浏览 来自 官方Issues

cover-image加载得图片不能在安卓手机上滑动,在苹果手机上可以

3 回复

   <view  bindtouchmove=“touchmoveCallback” bindtouchstart=“touchstartCallback”>

          <image src="…/…/images/123456.jpg"  mode=“aspecFit”  style=“width: {{ touch.scaleWidth }}rpx;height: {{ touch.scaleHeight }}rpx”    bindload=“bindload”  direction=“all” bindchange=“onChange” bindscale=“onScale” scale scale-min=“0.5” scale-max=“10” scale-value=“2”></image>

    </view>

Page({

  data: {

    touch: {

      distance: 0,

      scale: 1,

     baseWidth: null,

     baseHeight: null,

      scaleWidth: null,

     scaleHeight: null

    }

  },

  touchstartCallback: function (e) {

    // 单手指缩放开始,也不做任何处理

    if (e.touches.length == 1) {

      console.log(“单滑了”)

      return

    }

 

    // 注意touchstartCallback 真正代码的开始 // 一开始我并没有这个回调函数,会出现缩小的时候有瞬间被放大过程的bug // 当两根手指放上去的时候,就将distance 初始化。

    let xMove = e.touches[1].clientX - e.touches[0].clientX;

    let yMove = e.touches[1].clientY - e.touches[0].clientY;

    let distance = Math.sqrt(xMove * xMove + yMove * yMove);

    this.setData({

      ‘touch.distance’: distance,

    })

  },

  touchmoveCallback: function (e) {

    let touch = this.data.touch

     if (e.touches.length == 1) {

      console.log(“单滑了”);

      return

    }

    // 单手指缩放我们不做任何操作

    if(e.touches.length == 1)

    return console.log(‘双手指运动’)

    let xMove = e.touches[1].clientX - e.touches[0].clientX;

    let yMove = e.touches[1].clientY - e.touches[0].clientY;

    // 新的 ditance

    let distance = Math.sqrt(xMove * xMove + yMove * yMove);

    let distanceDiff = distance - touch.distance;

    let newScale = touch.scale + 0.005 * distanceDiff

    // 为了防止缩放得太大,所以scale需要限制,同理最小值也是

    if(newScale >= 2) {

    newScale = 2

  }

        if(newScale <= 0.6) {

       newScale = 0.6

}

let scaleWidth = newScale * touch.baseWidth

let scaleHeight = newScale * touch.baseHeight

// 赋值 新的 => 旧的

this.setData({

‘touch.distance’: distance,

  ‘touch.scale’: newScale,

    ‘touch.scaleWidth’: scaleWidth,

      ‘touch.scaleHeight’: scaleHeight,

        ‘touch.diff’: distanceDiff

        })

    },

bindload: function(e) {

  // bindload 这个api是<image>组件的api类似<img>的onload属性

  this.setData({

  ‘touch.baseWidth’: e.detail.width,

    ‘touch.baseHeight’: e.detail.height,

      ‘touch.scaleWidth’: e.detail.width,

        ‘touch.scaleHeight’: e.detail.height

})

    }

})

为啥我的在苹果手机放大后可以移动, 安卓放大后不能移动

恢复聊天记录

这里的不能滑动是触摸在cover-image上无法滑动页面?

回到顶部