小程序全局拖动悬浮球插件

项目源码~~需要app.js设置全局变量，保证全局统一显示隐藏，以及移动位置。

  <movable-area class='fixed-area'>
    <scroll-view style='height:100%;' scroll-y='true' bindscroll="scrollPage" bindscrolltolower='toBottom'>
    <slot/>
    </scroll-view>
    <movable-view  wx:if="{{movableBlo}}" direction='all' x="{{x}}" y="{{y}}" class='ball' bindtouchstart='touchStart' bindtouchend='end' bindtap='returnMini' animation="{{animate}}" bindchange='change'>
      <image src='/image/return.png' class='return-icon'></image>
      <text class='return-text'>返回</text>
    </movable-view>
    <view class='close-area {{alreadyClose?"big":""}}' hidden="{{!closeArea}}" wx:if="{{movableBlo}}">
      <image src='/image/close-ball.png' class='close-icon'></image>
      <text class='close-text'>取消浮窗</text>
    </view>
  </movable-area>

page{
  height: 100%;
}
.fixed-area{
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling : touch;
}
.ball{
  position: fixed;
  background: #fff;
  box-shadow: 0 0 5px #ddd; 
  border: #eee;
  width:100rpx;
  height:100rpx;
  text-align: center;
  z-index: 1002;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.close-area{
  position: fixed;
  width: 500rpx;
  height: 500rpx;
  right: -250rpx;
  bottom: -250rpx;
  background: #eb5352;
  border-radius: 50%;
  z-index: 1001;
}
.big{
  right: -230rpx;
  bottom: -230rpx;
}

.close-icon{
  height: 70rpx;
  width: 70rpx;
  position: absolute;
  top: 90rpx;
  left: 110rpx;
}
.close-text{
  position: absolute;
  top: 185rpx;
  left: 98rpx;
  font-size: 24rpx;
  color: #fff;
}
.return-icon{
  width: 40rpx;
  height: 40rpx;
  display: block;
  margin-bottom: 3rpx;
}
.return-text{
  color: #ca7;
  font-size: 18rpx;
  display: block;
}

// assembly/returnBall/returnBall.js
const app = getApp();
Component({

  /**
   * 页面的初始数据
   */
  data: {
    x: app.globalData.returnBall.x,
    y: app.globalData.returnBall.y,
    movableBlo: app.globalData.returnBall.show,
    animate: false
  },
  methods: {
    change(e) {
      let screenWidth = this.data.screenWidth,
        screenHeight = this.data.screenHeight;
      let x = e.detail.x
      let y = e.detail.y
      if (x > screenWidth - 250 && y > screenHeight - 250) {
        this.setData({
          alreadyClose: true
        })
      } else {
        this.setData({
          alreadyClose: false
        })
      }
    },
    returnMini() {
      app.navigate.returnBack()
    },
    touchStart() {
      this.setData({
        closeArea: true
      })
    },
    end(e) {
      let screenWidth = this.data.screenWidth,
        screenHeight = this.data.screenHeight,
        x = e.changedTouches[0].pageX,
        y = e.changedTouches[0].pageY;
      if (x > screenWidth - 100 && y > screenHeight - 100) {
        app.globalData.returnBall.show = false
        this.setData({
          movableBlo: false
        })
      }
      setTimeout(() => {
        app.globalData.returnBall.x = screenWidth;
        app.globalData.returnBall.y = y;
        this.setData({
          animate: true,
          x: screenWidth,
          y,
          closeArea: false
        })
      }, 300)
    },
    scrollPage(e) {
      let pages = getCurrentPages();
      let curPage = pages[pages.length - 1];
      if (curPage.myPageScroll) {
        curPage.myPageScroll(e)
      }
    },
    toBottom() {
      let pages = getCurrentPages();
      let curPage = pages[pages.length - 1];
      if (curPage.toBottom) {
        curPage.toBottom()
      }
    }
  },
  pageLifetimes: {
    show() {
      this.setData({
        x: app.globalData.returnBall.x,
        y: app.globalData.returnBall.y,
        movableBlo: app.globalData.returnBall.show,
        animate: false
      })
      this.setData({
        screenWidth: wx.getSystemInfoSync().windowWidth,
        screenHeight: wx.getSystemInfoSync().windowHeight
      })
    },
  }
})