小程序悬浮可移动的客服按钮，供大家参考，具体内容如下
|
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.jsconst 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
