个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
24
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章微信小程序实现可拖动悬浮图标(包括按钮角标的实现)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
在制作商城类微信小程序的过程中，我们经常会碰到需要增加可拖动悬浮图标的情况，本文简单的介绍一下可拖动悬浮按钮的实现.
运行截图:
主要代码:
js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
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,
//这里定义按钮的初始位置
})
}
})
},
//可拖动悬浮按钮点击事件
btn_Suspension_click:
function
(){
//这里是点击购物车之后将要执行的操作
wx.showToast({
title:
'点击成功'
,
icon:
'success'
,
duration: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 = 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
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--可拖动按钮控件表-->
<!--buttonStart和buttonEnd一定不能用
catch
事件，否则按钮点击事件会失效-->
<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=
"../images/Suspension.png"
></image><!--这里是按钮图标，下载地址会在文章底部说明-->
<view wx:
if
=
"{{corner_data==0}}"
></view>
<view wx:
else
>
<view class=
"cornorMark"
>
<text>{{corner_data}}</text>
</view>
</view>
</view>
|
wxss:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
Page{
background:
#f5f5f5;
}
/**可拖动悬浮按钮样式表**/
.btn_Suspension{
position: fixed;
height: 100rpx;
width: 100rpx;
background-color: rgba(255, 255, 255, 0.755);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
box-shadow: 1px 0px 1px 1px
#ede7e7;
}
.Suspension_logo{
position:absolute;
height:50%;
width:50%;
left:23%;
top:27%
}
.cornorMark{
position:absolute;
background: rgb(242, 109, 38);
border:1px solid rgb(242, 109, 38);
border-radius: 100px;
width:30rpx;
height:30rpx;
top:-17rpx;
right:3rpx;
color:
#fff;
font-size: 12px;
text-align: center;
}
.cornorMark text{
position:absolute;
width:100%;
left:0%;
text-align: center;
top:-1px;
}
|
图标素材下载地址:
Iconfont阿里巴巴矢量图标库：https://www.iconfont.cn/ 。
到此这篇关于微信小程序实现可拖动悬浮图标(包括按钮角标的实现)的文章就介绍到这了,更多相关小程序实现悬浮图标内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://blog.csdn.net/botellei/article/details/111826124 。
最后此篇关于微信小程序实现可拖动悬浮图标(包括按钮角标的实现)的文章就讲到这里了,如果你想了解更多关于微信小程序实现可拖动悬浮图标(包括按钮角标的实现)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
24
4
0
所以我有这个 javascript 片段，它有两个按钮可以进入全屏，一个按钮可以退出全屏。我想做到这一点，如果我不在全屏模式下，按钮会显示转到全屏模式，而当我处于全屏模式时，按钮会显示退出全屏模式..
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
我尝试将 Twitter 上的“Tweet Me”按钮 ( http://twitter.com/goodies/tweetbutton ) 添加到我的网站。然而，每当按下按钮时，我都会收到此 Jav
我试图在我的文本区域中获取一个按钮值，如果我使用 则工作正常但如果我使用那么它就不起作用了。你能找出问题所在吗？ HTML 1 2 3 4 JavaScript $(document).read
我的 C# Winform 面板中有一堆文本框。每行文本框的命名如下: tb1 tbNickName1 comboBox1 tb2 tbNickName2 comboBox2 tb3 tbNickNa
我有一个表单，其中过滤器下方有按钮(应用过滤器和清除过滤器)，我试图在单击“应用”按钮时显示“清除”，并在单击“清除”按钮时隐藏“清除”按钮。 下面的代码(如果我的表有的话):
excel 按钮正在工作，但是当我添加 pdf 按钮时，它添加仅显示 pdf 按钮 excel 按钮在 pdf 按钮添加后隐藏 $(document).ready(function() { $
我想创建一个 div 作为标题并分成 3 列，并按以下顺序在其中放置 2 个按钮和一个标题:Button1(左位) Title(居中) Button2(右位) 这是我为这个 div 编写的代码:
仅当选中所有框时才应禁用“允许”按钮。我该怎么做？我已经完成了 HTML 部分，如下所示。如何执行其中的逻辑部分？即使未选中一个复选框，也应禁用“允许”按钮
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
如您所知，您可以使用 2 种方法在 HTML5 中呈现按钮: 使用 void 元素 或 如果您需要内容，请使用 元素(不是空元素)。 在JSF2中，有2种方式生成按钮；与UICommand或 UIOu
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。 下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
我有用于在消息(电子邮件、短信)上输入内容的 EditText。我希望在单击 ActionDone 按钮时立即发布消息。我为此使用以下代码: message.setOnEditorActionList
我的 Android 应用程序中有一堆 EditText，每个都将 InputMethod 设置为 numberSigned。我的目标设备没有硬件键盘，而是使用软件键盘输入数字。 Android 将输
我无法以编程方式隐藏弧形菜单中的 fab 按钮。我正在使用https://github.com/saurabharora90/MaterialArcMenu在我的代码中。如何在Java中以编程方式隐藏
我已经看到这在其他类型的对话框窗口中是可能的，例如“showConfirmDialog”，其中可以指定按钮的数量及其名称；但是使用“showInputDialog”时是否可以实现相同的功能？我似乎无法
相同的按钮用于激活和停用。第一次，当代码运行按钮单击并成功“停用”时。但第二次，代码无法找到该元素。第一个案例按钮位于第二个“a”标签中，然后停用第一个“a”标签中的按钮。 案例1: Edit
是否可以将按钮的 onclick 操作设置为 JavaScript 变量？这个想法是我们用 JavaScript 控制一个表。每当点击该表的一行时，我们就会更新一个 JavaScript 变量。该 v
我想创建一个按钮，它包含左侧的文本和右侧的复选框(或任何其他组件)。我怎样才能做到这一点？ 我发现我可以制作自己的 View extends Button，但是如果可以的话我应该如何实现 onDraw
我是一名优秀的程序员,十分优秀！