小程序悬浮可移动的客服按钮,供大家参考,具体内容如下
//根据x,y设置初次显示的位置 客服电话
CSS:
.movable-area{
pointer-events:none;
z-index: 100;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.movable-view{
pointer-events:auto;
height: 100rpx;
width: 120rpx;
}
.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;
}
// 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: '手机号',
})
},
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。



