微信小程序浮标，可以拖动，自动靠边隐藏一半客服图标功能

不多说，直接上代码。全屏拖动无抖动，中间停留自动靠边，拖动隐藏一半，可自己根据代码改动为自己想要的效果

js代码

import { tpStaticUrl,basictpStaticUrl } from "../../../envConfig";
let app = getApp();
Component({ 
  properties: { },
  data: {
    windowWidth: 0, // 手机宽度
    windowHeight:0, // 手机高度
    touX: 0,  // 拖动后的X坐标
    touY: 0, // 拖动后的Y坐标
    x: 250,//定位X轴位置
    y: 250, //定位Y轴位置
    icon_xiaodangjia: tpStaticUrl+'/web/wxapp/bxsc/icon_xiaodangjia.png', // 
  },
  pageLifetimes: {  // 初始化
    show: function() { 
      var that = this;
      // console.log('222222222')
      wx.getSystemInfo({ 
         success: function(res) { 
          console.log(res)
          that.setData({
            windowWidth: res.windowWidth, // 手机宽度 
            windowHeight: res.windowHeight, // 手机高度
            x: res.windowWidth - 50,
            y: res.windowHeight /2 - 20
          })
        },
        fail: function(res) { },
        complete: function(res) {  
        },
      })
   },
    hide: function() { },
    resize: function() { },
  },
  methods: { 
    serviceClick(){ // chelink + '/xiaoDj/index.html?wxtoken=' + rInfo.wxtoken + '&openId=' + uid
      app.globalData.webviewSrc = basictpStaticUrl + '/web/xiaoDj/index.html?wxtoken=' + app.globalData.userInfo.xtoken + '&openId=' + app.globalData.userInfo.gwOpenId + '&unionId=' + app.globalData.userInfo.unionId;
      wx.navigateTo({  //  reLaunch关闭所有页面跳转  关闭当前页面--跳转 redirectTo    navigateTo不关闭页面跳转
        url: "/pages/page/webView/webView"
      })
    },
    bindchange(e){
      this.setData({ 
        touX: e.detail.x,
        touY: e.detail.y
        })
      //  console.log(e.detail)
    },
    bindtouchend(e){
      let _this = this;
      // console.log('停止',_this.data.touY,e)
      // setTimeout(function(){
        if(_this.data.touX + 50 > _this.data.windowWidth && _this.data.touY+50 < _this.data.windowHeight){ // 移动右边超过了边距
          _this.setData({ 
            x: _this.data.windowWidth - 25,
            y: e.changedTouches[0].pageY-20
            // y: Number(JSON.parse(JSON.stringify(_this.data.touY)))
          })
        }

        if(_this.data.touX + 50 < _this.data.windowWidth && _this.data.touY+50 < _this.data.windowHeight){  // 没有超过的时候，自动在右边
          _this.setData({ 
            x: _this.data.windowWidth - 50,
            y: e.changedTouches[0].pageY-20
            // y: Number(JSON.parse(JSON.stringify(_this.data.touY)))
          })
        }

        if(_this.data.touY+50 > _this.data.windowHeight){ // 滑到底部的时候
          _this.setData({
            x: _this.data.windowWidth-50, 
            y: _this.data.windowHeight- 100
            // y: Number(JSON.parse(JSON.stringify(_this.data.touY)))
          })
        }
      // },1000)

    
    } 
  }

});

wxml 代码

<movable-area>
  <movable-view x='{{x}}' y='{{y}}' direction="all" style="pointer-events: auto;" bindchange="bindchange" bindtouchend="bindtouchend">
      <div bindtap="serviceClick" class="kefu">
        <image src="{{icon_xiaodangjia}}" class="kefuIcon"></image>
      </div>
  </movable-view>
</movable-area>

wxss 代码

movable-area{ 
  width: 100%;
  height:100%;
  /*设置透明不影响后面的操作*/
  pointer-events: none;
  position:fixed;
  text-align: center;
  right:0px;
  top:0px;
  background: none;
  z-index: 9999;
  }
  .kefu, .kefuIcon { 
  /* width: 45px;
  height: 45px; */
  border: none;
  padding: 0;
  background: none;
  }
  .kefu image {
    display: inline-block;
    width: 96rpx;
    height: 100rpx;
  }
  /* .kefu image { 
  max-width: 100%;
  max-height: 100%;
  } */
  .kefu button::after { 
  border: none;
  }