小程序懸浮可移動的客服按鈕，供大家參考，具體內容如下
|
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
