<template>
    <view class="container">
      <view wx:if="{{!isShowSelector}}" class="floatIcon" @tap="turnToManagement" @touchmove.stop="buttonMove" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;">
        <image
          src="@/images/floating_icon.png"
          mode="scaleToFill"
        />
        <text>随访管理</text>
      </view>
     </view>
</template>
<style scope language="less">
.floatIcon {
    display: flex;
    position: absolute;
    z-index: 99;
    pointer-events: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    right: auto;
    top: auto;
    width: 120rpx;
    height: 120rpx;
    background: #00ff88;
    border-radius: 50%;
    image{
      width: 40rpx;
      height: 40rpx;
      margin: 0rpx 40rpx 6rpx;
    }
    text{
      color: white;
      font-size: 20rpx;
      white-space: nowrap;
    }
  }
</style>
<script>
import wepy from 'wepy'
export default class testPage extends wepy.page {
  data = {
    buttonTop: 0,
    buttonLeft: 0,
    windowHeight: 0,
    windowWidth: 0
  }
  methods = {
    buttonMove(e) {
      let endPoint = e.touches[e.touches.length - 1]
      const translateX = endPoint.clientX - startPoint.clientX
      const translateY = endPoint.clientY - startPoint.clientY
      let buttonTop = this.buttonTop + translateY
      let buttonLeft = this.buttonLeft + translateX
      if (buttonLeft + 60 >= this.windowWidth) {
        buttonLeft = this.windowWidth - 60;
      }
      if (buttonLeft <= 0) {
        buttonLeft = 0;
      }
      if (buttonTop <= 0) {
        buttonTop = 0
      }
      if (buttonTop + 60 >= this.windowHeight) {
        buttonTop = this.windowHeight - 60;
      }
      this.buttonTop = buttonTop
      this.buttonLeft = buttonLeft
    },
    turnToManagement() {
      wepy.navigateTo({url: '/pages/management'})
    }
  }
}
</script>

实现一个可拖动的float按妞，常见的客服，购物车展现形式。代码如上图，wepy框架copy可用