微信小程序拖拽组件

主要就是两个属性

给movable-area加上pointer-events: none，给movable-view加上pointer-events: auto

参考下面的社区

movable-area导致下面的内容无法点击怎么解决 | 微信开放社区 (qq.com)

<style lang="scss">
    @import "../../css/main";
    .moveFather{
        width: calc(100% - 112rpx);
        height: calc(100vh - 112rpx);
        position: fixed;
        top: 0;
        pointer-events: none;
        z-index: 20;
    }
    .moveChildren{
        pointer-events: auto
    }
    /*购物车*/
    .shopping{
        width: 112rpx;
        height: 112rpx;
        background: #FF4A4A;
        border-radius: 50%;
        .shopping--img{
            width: 44rpx;
            height: 43rpx;
            display: block;
            padding-left: 30rpx;
            padding-top: 16rpx;
        }
        .shopping--txt{
            @include font($s: 18rpx, $w: 400, $c: #fff,$ta: center);
            margin-top: 6rpx;
        }
    }
</style>
<template>
    <movable-area class="moveFather">
        <movable-view x="32rpx" y="620rpx" direction="all" class="moveChildren">
            <view class="shopping" @tap="gotoShopping">
                <image class="shopping--img" src="{{cloudUrl2}}/home/shopping.svg" />
                <view class="shopping--txt">购物车</view>
            </view>
        </movable-view>
    </movable-area>
</template>
<script>
    import wepy from "wepy";
    export default class shipping extends wepy.component {
        props = {
            user:String,
        };
        data = {
            cloudUrl2:wepy.$instance.globalData.cloudUrl2,
        };
        components = {};
        watch = {
        }
        onLoad(){
        }
        onShow(){}
        methods = {
            gotoShopping(){
                wx.navigateTo({
                    url:`/pages/merchant/shopping`
                })
            },
        };
    }
</script>