小程序悬浮可移动的客服按钮,供大家参考,具体内容如下
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 : 100 rpx;
width : 120 rpx;
/* background: red; */
}
.xf-text {
font-size : 12px ;
color : #255DEA ;
margin-top : 10 rpx;
}
.xf_button{
background-color : rgba( 255 , 255 , 255 , 0 );
border : 0px ;
height : 100 rpx;
top : 70% ;
right : 0 ;
bottom : 20 rpx;
position : fixed ;
display : flex;
flex- direction : column;
}
.xf_button::after{
border : 0px ;
}
.xf_image{
z-index : 5 ;
width : 100 rpx;
height : 100 rpx;
}
|
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