小程序实现可拖动的悬浮按钮

时间:2022-10-19 20:30:37

小程序悬浮可移动的客服按钮,供大家参考,具体内容如下

?
1
2
3
4
5
6
7
<movable-area class="movable-area">
//根据x,y设置初次显示的位置
 <movable-view x="600rpx" y="750rpx" animation="{{false}}" class="movable-view" direction='all' catchtap="bindtapdianhua">
 <image class="xf_image" src="../../../images/icon/phone.png"></image>
 <text class="xf-text">客服电话</text>
 </movable-view>
</movable-area>

CSS:

?
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
.movable-area{
 pointer-events:none;
 /* 这个属性设置为none,让所有事件穿透过去 */
 z-index: 100;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}
.movable-view{
 pointer-events:auto;
 /* 重设为auto,覆盖父属性设置 */
 height: 100rpx;
 width: 120rpx;
 /* background: red; */
}
.xf-text {
 font-size:12px;
 color:#255DEA;
 margin-top: 10rpx;
}
.xf_button{
 background-color: rgba(255, 255, 255, 0);
 border: 0px;
 height: 100rpx;
 top: 70%;
 right: 0;
 bottom: 20rpx;
 position: fixed;
 display: flex;
 flex-direction: column;
}
.xf_button::after{
 border: 0px;
}
.xf_image{
 z-index: 5;
 width: 100rpx;
 height: 100rpx;
}
?
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
// pages/components/ss-phone-button.js
const app = getApp()
Page({
 /**
 * 页面的初始数据
 */
 data: {
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 
 },
 
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {
 
 },
 
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {
 
 },
 // 客服电话,点击拨打
 bindtapdianhua: function (e) {
 wx.makePhoneCall({
  phoneNumber: '手机号',
 })
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/qq_42624884/article/details/108408505