小程序
小游戏
企业微信
微信支付
扫描小程序码分享
web-view页怎样添加一个可手指拖动悬浮按钮啊?有没有人知道啊,按钮是用cover-view写的,在其上添加了bindtouchmove="buttonMove" bindtouchstart="buttonStart" 事件,ios可以拖动,但安卓是一点也拖不动啊
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
打印一下看是不是报错了,还有就是返回的参数是不是有什么区别,或者使用https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html方法试一下
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
<web-view src="">
<cover-view class="show w" bindtap="userClose" bindtouchmove="buttonMove" bindtouchstart="buttonStart" style="top:{{buttonTop}}rpx;left:{{buttonLeft}}rpx;">
<cover-image src="https://sales-dev.ihxlife.com/HuaPM_V/bcard/image/room/tool_show.png" class="user_show"></cover-image>
<cover-view class="text">显示</cover-view>
</cover-view>
</web-view>
data: {
tpUrl: 'https://sales-int.ihxlife.com/ldi/mp/ww.html',
buttonTop: "",
buttonLeft: "",
windowHeight: '',
windowWidth: '',
},
userClose() {
console.log(4556677)
buttonStart: function (e) {
console.log(777, e)
this.setData({
startPoint: e.touches[0]
})
//获取拖动开始点
buttonMove: function (e) {
console.log(666, e)
let rpx = this.data.rpx
var endPoint = e.touches[e.touches.length - 1] //获取拖动结束点
//计算在X轴上拖动的距离和在Y轴上拖动的距离
var translateX = endPoint.clientX - this.data.startPoint.clientX
var translateY = endPoint.clientY - this.data.startPoint.clientY
startPoint: endPoint
}) //重置开始位置
var buttonTop = this.data.buttonTop + translateY / rpx
var buttonLeft = this.data.buttonLeft + translateX / rpx
//判断是移动否超出屏幕
if (buttonLeft + 90 >= this.data.windowWidth) {
buttonLeft = this.data.windowWidth - 90;
}
if (buttonLeft <= 0) {
buttonLeft = 0;
if (buttonTop <= 0) {
buttonTop = 0
if (buttonTop + 138 >= this.data.windowHeight) {
buttonTop = this.data.windowHeight - 138;
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
打印一下看是不是报错了,还有就是返回的参数是不是有什么区别,或者使用https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html方法试一下
<web-view src="">
<cover-view class="show w" bindtap="userClose" bindtouchmove="buttonMove" bindtouchstart="buttonStart" style="top:{{buttonTop}}rpx;left:{{buttonLeft}}rpx;">
<cover-image src="https://sales-dev.ihxlife.com/HuaPM_V/bcard/image/room/tool_show.png" class="user_show"></cover-image>
<cover-view class="text">显示</cover-view>
</cover-view>
</web-view>
data: {
tpUrl: 'https://sales-int.ihxlife.com/ldi/mp/ww.html',
buttonTop: "",
buttonLeft: "",
windowHeight: '',
windowWidth: '',
},
userClose() {
console.log(4556677)
},
buttonStart: function (e) {
console.log(777, e)
this.setData({
startPoint: e.touches[0]
})
//获取拖动开始点
},
buttonMove: function (e) {
console.log(666, e)
let rpx = this.data.rpx
var endPoint = e.touches[e.touches.length - 1] //获取拖动结束点
//计算在X轴上拖动的距离和在Y轴上拖动的距离
var translateX = endPoint.clientX - this.data.startPoint.clientX
var translateY = endPoint.clientY - this.data.startPoint.clientY
this.setData({
startPoint: endPoint
}) //重置开始位置
var buttonTop = this.data.buttonTop + translateY / rpx
var buttonLeft = this.data.buttonLeft + translateX / rpx
//判断是移动否超出屏幕
if (buttonLeft + 90 >= this.data.windowWidth) {
buttonLeft = this.data.windowWidth - 90;
}
if (buttonLeft <= 0) {
buttonLeft = 0;
}
if (buttonTop <= 0) {
buttonTop = 0
}
if (buttonTop + 138 >= this.data.windowHeight) {
buttonTop = this.data.windowHeight - 138;
}