小程式 懸浮可移動的客服按鈕，供大家參考，具體內容如下

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

.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,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: '手機號',})
 },})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。