在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
js代码 var startPoint Page({ data: { //按钮位置参数 buttonTop: 0, buttonLeft: 0, windowHeight: '', windowWidth: '', //角标显示数字 corner_data:0, }, onLoad:function(){ //定义角标数字 this.setData({ corner_data:3 }) 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, buttonTop:res.windowHeight*0.70,//这里定义按钮的初始位置 buttonLeft:res.windowWidth*0.70,//这里定义按钮的初始位置 }) } }) }, //以下是按钮拖动事件 buttonStart: function (e) { startPoint = e.touches[0]//获取拖动开始点 }, buttonMove: function (e) { var endPoint = e.touches[e.touches.length - 1]//获取拖动结束点 //计算在X轴上拖动的距离和在Y轴上拖动的距离 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) { } }) wxml代码 <view class="btn_Suspension" bindtap="btn_Suspension_click" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;"> <image class="Suspension_logo" src="XXXXXXX.png"></image> </view> </view> vue的拖拽原理也是一样的 1.监听拖拽开始事件获取初始位置 2.监听移动事件并获取x,y轴与初始位置的差 3.改变在data中的元素位置参数 |
请发表评论