小程序-可拖动的悬浮按钮

小程序 悬浮可移动的客服按钮

<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;
  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
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: '手机号',
    })
  },
})