微信小程序悬浮球效果

用的是微信文档里的组件movable-area和movable-view

<movable-area class="movable-area">
        <movable-view 
            class="movable-view" 
            x="{{x}}" y="{{y}}" 
            direction="all" 
            bindchange="bindcmove" 
            bindtouchend="moveend" 
            bindtap="balltap" 
        >
            <image class="my1" src="/image/my-1.png" mode="aspectFit" hidden="{{noshow}}"/>
        </movable-view>
    </movable-area>

先基本展示出来悬浮球的样式和效果

.movable-area {
    pointer-events: none;
    z-index: 100;
    width: 100%;
    height: calc(100% - 90rpx);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
}

.movable-view {
    pointer-events: auto;
    top: 350rpx;
    height: 100rpx;
    width: 100rpx;
    border-radius: 50%;
    background: #F2F2F2;
    border: 2rpx solid #e6e6e6;
    box-shadow: 0 0 20rpx #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.my1 {
    width: 40rpx;
    height: 40rpx;
}

当时做了透明状态栏，避免把球滑到自定义状态栏下边，就减去状态栏高度

获取屏幕宽

onLoad(options) {
        const res = wx.getSystemInfoSync();
        let winwidth = res.windowWidth;
        this.setData({
            winwidth,
        })
    },

做球的结束移动事件

moveend(e) {
        let query = wx.createSelectorQuery();
        let queryString = '.movable-view';
        query.select(queryString).boundingClientRect();
        // 屏幕宽度
        let winwidth = this.data.winwidth;
        query.exec(function(res){
            let ballwidth = res[0].width;
             // 移动过后悬浮球的位置
            let endPointleft = res[0].left;
            let endPointright = res[0].right;
            // 以屏幕中间为界划分屏幕左右两边
            let leftwin = endPointright < (winwidth / 2);
            if (leftwin == true) {
                console.log("我在左边")
            } else {
                console.log("我在右边")
            }
            if (endPointright >= winwidth || endPointleft <= 0) {
                console.log("我到边了")
            }
        })
    },

本身需要做的悬浮球效果是，需要球偏向哪边的时候就自动划向哪边，然后靠边的时候半隐藏状态。。。。
因为做到一半的时候设计图又修改了，所以暂时只做到一半就放弃了