movable-area可移动的视图容器

右侧上下移动 

    <view>
        <movable-area class="movable-area"> 

               <view class="" style="overflow: auto;height: 100%;"></view>

                <movable-view class="movable-view" direction="vertical">
                <view class="smooth" @click="smoothHandle" :class="smoothShow? 'goTo' : 'wait'">
                    <block v-if="smoothShow==true">
                        <image src="../../static/images/carB.png" mode="widthFix"></image>
                        <view class="txt">顺畅</view>
                    </block>
                    <block v-else>
                        <image src="../../static/images/carH.png" mode="widthFix"></image>
                        <view class="txt black">需排队</view>
                    </block>
                </view>
            </movable-view>

        </movable-area>
    </view>

.movable-area {
        height: 100vh;
        width: 100%;
        background-color: #D8D8D8;
        overflow: hidden;
    }
    .movable-view {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        color: #fff;
        left: auto;
        top: auto;
        right: 20px;
        bottom: 10rpx;
        z-index: 2022;
        position: absolute;
    }
    .movable-area {
        height: 100vh;
        width: 100%;
        background-color: #D8D8D8;
        overflow: hidden;
    }