Taro/微信小程序 利用MovableView实现可拖拽悬浮

import {
  View,
  Image,
  MovableView,
  MovableArea
} from "@tarojs/components";

import headerHomeImg from "../../assets/images/home.png";

 state = {
    windowData: {}
  };

componentWillMount() {
//Taro.getSystemInfoSync() 获取系统信息同步接口。
    this.setState({
      windowData: Taro.getSystemInfoSync()
    });
  }

 render() {
    const { windowData } = this.state;
  
    return (
      <MovableArea className="detailPage">
        <View className="detail_page">
       
          {/* 回到首页 */}
          <MovableView
            y={windowData.safeArea.height - 120}
            x={windowData.safeArea.width - 70}
            className="backHome"
            direction="all"
            onClick={e => Taro.switchTab({ url: "/pages/index/index" })}
          >
            <Image src={headerHomeImg} className="backHomes" />
            <View>回到首页</View>
          </MovableView>
        </View>
      </MovableArea>
    );
  }

样式：

.detailPage{
  width: 100%;
  height: 100vh;
}
.detail_page {
  width: 100%;
  height: auto;}

  .backHome {
    width: 120px;
    height: 120px;
    background: rgba(255, 177, 0, 0.8);
    box-shadow: 0px 5px 10px 0px rgba(115, 80, 0, 0.3);
    z-index: 999;
    border-radius: 50%;
    position: fixed;
    bottom: 148px !important;
    right: 24px !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    color: #FFFFFF;
  
    .backHomes {
      width: 48px;
      min-height: 48px;
      height: 48px;
      margin-bottom: 10px;
    }
  }