介绍 var 曾经繁荣
页面({
,数据:{
,//按钮位置参数
,buttonTop: 0,
,buttonLeft: 0,
,windowHeight: & # 39; & # 39;
,windowWidth: & # 39; & # 39;
,//角标显示数字
,corner_data: 0,
},
,onLoad:函数(){
,//定义角标数字
,this.setData ({
,corner_data: 3
,})
,//获取购物车控件适配参数
,var that =;
,wx.getSystemInfo ({
,,成功:function (res), {
console.log才能(res);//才能,屏幕宽度,高度
console.log才能(& # 39;身高=& # 39;,+,res.windowHeight);
console.log才能(& # 39;宽度=& # 39;,+,res.windowWidth);//,才能高度,宽度,单位为px
that.setData({才能
,,,windowHeight: res.windowHeight,
,,,windowWidth: res.windowWidth,
,,buttonTop: res.windowHeight * 0.70//这里定义按钮的初始位置
,,buttonLeft: res.windowWidth * 0.70//这里定义按钮的初始位置
})才能
,,}
,})
},
,//可拖动悬浮按钮点击事件
,btn_Suspension_click:函数(){
,//这里是点击购物车之后将要执行的操作
,wx.showToast ({
,,标题:& # 39;点击成功& # 39;,
图标:& # 39;才能成功,,
,时间:1000
,})
},
,//以下是按钮拖动事件
,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 端点//重置开始位置
,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), {
,}
}) & lt; !——可拖动按钮控件表——比;
& lt; !——buttonStart和buttonEnd一定不能用抓事件,否则按钮点击事件会失效——比;
& lt; view 类=癰tn_Suspension", bindtap=癰tn_Suspension_click", catchtouchmove=癰uttonMove", bindtouchstart=癰uttonStart", bindtouchend=癰uttonEnd",在
,& lt; image 类=癶ttps://www.yisu.com/zixun/Suspension_logo", src=" . ./图片/Suspension.png”>
<查看天气:如果=" {{corner_data==0}} ">
<查看天气:其他>
<视图类=" cornorMark ">
<文本> {{corner_data}}
页面{
,背景:# f5f5f5;
}/* *可拖动悬浮按钮样式表* */.btn_Suspension {
位置:大敌;固定;
,身高:100 rpx;
,宽度:100 rpx;
,背景颜色:rgba (255,, 255,, 255,, 0.755);
,这个特性:100%;
,显示:flex;
,对齐项目:中心;
,justify-content:中心;
,z - index: 99999;
,不必:1 px 0 px 1 px 1 px # ede7e7;
}
.Suspension_logo {
,位置:绝对;
,高度:50%;
,宽度:50%;
,左:23%;
上图:27%
}
.cornorMark {
,位置:绝对;
,背景:rgb (242,, 109,, 38);
,边界:1 px solid rgb (242,, 109,, 38);
,这个特性:100 px;
,宽度:30 rpx;
,高度:30 rpx;
,最高:-17 rpx;
,右:3 rpx;
,颜色:# fff;
,字体大小:12 px;
,text-align:中心;
}
{.cornorMark 文本
,位置:绝对;
,宽度:100%;
,左:0%;
,text-align:中心;
,最高:1 px;
}
怎么在微信小程序中实现一个可拖动的悬浮图标?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
js:
wxml:
wxs:
看完上述内容,你们掌握怎么在微信小程序中实现一个可拖动的悬浮图标的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
