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

<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>

.movable-area{
 pointer-events:none;
 / 这个属性设置为none,让所有事件穿透过去 /
 z-index: 100;
 width: 100%;
 height: 100%;
 position: fixed;
 : 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-: 10rpx;
}
.xf_button{
 background-color: rgba(255, 255, 255, 0);
 border: 0px;
 height: 100rpx;
 : 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/ponents/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: '手机号',
 })
 },
})