小程序
小游戏
企业微信
微信支付
扫描小程序码分享
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
console.log("单滑了");
// 单手指缩放我们不做任何操作
if(e.touches.length == 1)
return console.log('双手指运动')
// 新的 ditance
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
// 赋值 新的 => 旧的
'touch.scale': newScale,
'touch.scaleWidth': scaleWidth,
'touch.scaleHeight': scaleHeight,
'touch.diff': distanceDiff
bindload: function(e) {
// bindload 这个api是<image>组件的api类似<img>的onload属性
'touch.baseWidth': e.detail.width,
'touch.baseHeight': e.detail.height,
'touch.scaleWidth': e.detail.width,
'touch.scaleHeight': e.detail.height
为啥我的在苹果手机放大后可以移动, 安卓放大后不能移动
这里的不能滑动是触摸在cover-image上无法滑动页面?
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
<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上无法滑动页面?