- 当前 Bug 的表现(可附上截图)
按钮只能移动,单击事件不再触发
- 预期表现
拖动时移动,单击时触发上传功能
- 复现路径
WXML:
<button bindtap='upload_img' catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;width: 50px;height:50px;border-radius:50px;position:fixed;background:#4267b2;line-height:50px;font-size:25pt;color:#fff;">+</button><!--上传图像至服务器-->
JS:
var startPoint;
Page({
data: {
buttonTop: 0,
buttonLeft: 0,
windowHeight: '',
windowWidth: ''
},
onLoad: function (options) {
var that =this;
wx.getSystemInfo({
success: function (res) {
console.log(res);
// 屏幕宽度、高度
console.log('height=' + res.windowHeight);
console.log('width=' + res.windowWidth);
// 高度,宽度 单位为px
that.setData({
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
}
})
},
onShow: function () {
},
buttonStart: function (e) {
startPoint = e.touches[0]
},
buttonMove: function (e) {
var endPoint = e.touches[e.touches.length - 1]
var translateX = endPoint.clientX - startPoint.clientX
var translateY = endPoint.clientY - startPoint.clientY
startPoint = endPoint
var buttonTop = this.data.buttonTop + translateY
var buttonLeft = this.data.buttonLeft + translateX
//判断是移动否超出屏幕
if (buttonLeft+50 >= this.data.windowWidth){
buttonLeft = this.data.windowWidth-50;
}
if (buttonLeft<=0){
buttonLeft=0;
}
if (buttonTop<=0){
buttonTop=0
}
if (buttonTop + 50 >= this.data.windowHeight){
buttonTop = this.data.windowHeight-50;
}
this.setData({
buttonTop: buttonTop,
buttonLeft: buttonLeft
})
},
buttonEnd: function (e) {
}
})
- 提供一个最简复现 Demo
使用 bindtouchstart 即可
谢谢您!
升级下微信版本试下?
没用呀,真机调试是最新的版本,也是不行
麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
https://developers.weixin.qq.com/s/ymXedqmW7l8w
机型:iphone 7 plus
微信版本号:7.0.3
基础调试库:2.7.0
复现步骤是?
点击选择图片,选择一张图片后点击+号按钮,应该是将图片发送至后端,但是没有响应