微信小程序可移动浮窗

    <movable-area class="movable-box" style="height:{{phoneHeight}}px">
        <movable-view out-of-bounds class='advisory' x="{{x}}" y="{{y}}" direction="all" damping="50"
        bindchange="changeMove">
            <image mode="widthFix" src='https://sucai.suoluomei.cn/sucai_zs/images/20191206114133-1.png'>
            </image>
        </movable-view>
    </movable-area>

Page({
  data: {
    x: 750,
    y: 750,
    phoneWidth: 0,
    phoneHeight: 0
  }
   })
   onLoad(){
    this.getPhoneInfo()
   }
   //获取设备信息
   getPhoneInfo() {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          phoneWidth: res.windowWidth,
          phoneHeight: res.windowHeight - (res.screenHeight - res.windowHeight),
          x: res.windowWidth - 60,
          y: res.windowHeight - 200
        })
      }
    })
  },
  
  //限制浮窗在页面中间
  changeMove(e) {
    if (e.detail.x < this.data.phoneWidth / 2) {
      this.setData({
        x: 10,
        y: e.detail.y
      })
    } else if (e.detail.x > this.data.phoneWidth / 2) {
      this.setData({
        x: this.data.phoneWidth - 80,
        y: e.detail.y
      })
    }
  },

.movable-box {
    position: fixed;
    width: 100%;
}

.advisory {
    position: fixed;
    width: 126rpx;
    z-index: 100;
}
image{
	width: 100%;
    height: 100%;
}