我要评论- 小程序上是实现拖动图标
- 效果
index.wxml
<view>
<view class="move-box" catchtouchmove="buttonmove" bindtouchstart="buttonstart" style="top:{{buttontop}}px;left:{{buttonleft}}px;" >
悬浮图标
</view>
</view>index.ts
let startpoint: any;
page({
/**
* 页面的初始数据
*/
data: {
//按钮位置参数
buttontop: 0,
buttonleft: 0,
windowheight: '',
windowwidth: '',
},
/**
* 生命周期函数--监听页面加载
*/
onload() {
},
buttoninit() {
// 获取图标控件适配参数
var that = this;
wx.getsysteminfo({
success: function (res: any) {
// 屏幕宽度、高度
// 高度,宽度 单位为px
that.setdata({
windowheight: res.windowheight,
windowwidth: res.windowwidth,
buttontop: res.windowheight * 0.70, // 这里定义按钮的初始位置
buttonleft: res.windowwidth * 0.70, // 这里定义按钮的初始位置
})
}
})
},
//以下是按钮拖动事件
buttonstart: function (e: any) {
startpoint = e.touches[0]//获取拖动开始点
},
buttonmove: function (e: any) {
const endpoint = e.touches[e.touches.length - 1]//获取拖动结束点
//计算在x轴上拖动的距离和在y轴上拖动的距离
const translatex = endpoint.clientx - startpoint.clientx
const translatey = endpoint.clienty - startpoint.clienty
startpoint = endpoint//重置开始位置
let buttontop: any = this.data.buttontop + translatey
let buttonleft: any = this.data.buttonleft + translatex
//判断是移动否超出屏幕
const windowwidth: any = this.data.windowwidth;
const windowheight: any = this.data.windowheight;
if (buttonleft + 60 >= windowwidth) {
buttonleft = windowwidth - 60;
}
if (buttonleft <= 0) {
buttonleft = 0;
}
if (buttontop <= 0) {
buttontop = 0
}
if (buttontop + 60 >= windowheight) {
buttontop = windowheight - 60 - 40;
}
this.setdata({
buttontop: buttontop,
buttonleft: buttonleft
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onready() {
},
/**
* 生命周期函数--监听页面显示
*/
onshow() {
this.buttoninit();
},
/**
* 生命周期函数--监听页面隐藏
*/
onhide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onunload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onpulldownrefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onreachbottom() {
},
/**
* 用户点击右上角分享
*/
onshareappmessage() {
}
})index.wxss
.move-box {
position: fixed;
width: 45px;
height: 45px;
background-color: aquamarine;
border-radius: 50%;
font-size:12px;
text-align: center;
padding: 5px;
box-sizing: border-box;
color:blueviolet;
font-weight: 600;
}index.json
{
"navigationbartitletext":"拖动悬浮图标",
"usingcomponents": {}
}到此这篇关于微信小程序实现拖动悬浮图标效果的文章就介绍到这了,更多相关小程序拖动悬浮图标内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论