微客导航 » 文章资讯 » 小程序实现可拖动的悬浮按钮

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

2023-07-17 03:19:08 350

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


//根据x,y设置初次显示的位置


客服电话

CSS:

.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;
}

//pages/components/ss-phone-button.js
constapp=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:'手机号',
})
},
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐