首先来看一下效果
直接上代码
wxml
<view class="yidong" bindtap="btn_Suspension_click" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;">
<view class="tidongdiv" hover-class="none" hover-stop-propagation="false">会员
咨询</view>
</view>
wxss 主要就是 加了 固定定位
.yidong {
width: 128rpx;
height: 124rpx;
background: #FA8A00;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
box-shadow: 1px 0px 1px 1px #ede7e7;
position: fixed;
}
.tidongdiv {
width: 64rpx;
height: 88rpx;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
data 里面我们需要的参数
var startPoint //放到第一行
Page({
data{
//拖拽开始
buttonTop: 0,
buttonLeft: 0,
windowHeight: '',
windowWidth: '',
}
)}
wxjs onLoad 里面 确定我们的屏幕高度,宽度-还有我们拖拽盒子的初始位置
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,
buttonTop: res.windowHeight * 0.25, //这里定义按钮的初始位置
buttonLeft: res.windowWidth * 0.83, //这里定义按钮的初始位置
})
}
})
},
wxjs中 我们用到的方法
buttonStart: function(e) {
startPoint = e.touches[0] //获取拖动开始点
},
点击
btn_Suspension_click: function() {
//这里是点击之后将要执行的操作
},
按住开始滑动
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) {
},