android 浮动按钮拖拽,小程序拖拽浮动按钮
小程序拖拽浮動按鈕
2019-5-22 ?? 分類: 小程序
小程序 浮動? 拖拽 按鈕
不借助movable-area自帶的組件，實現拖拽效果
wxml
+
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) {
}
})
總結
以上是生活随笔為你收集整理的android 浮动按钮拖拽,小程序拖拽浮动按钮的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java事件绑定,Java编程GUI中的
- 下一篇： apple ii 模拟器 mac_苹果自