uniapp （微信小程序） 滑动抽屉 || 侧边栏 || 抽屉

仿colorui 的全屏抽屉效果，因为项目中已经有一套UI 看着colorui的这个效果还不错 就照着效果写了下

页面中我这里是设置的无导航栏 真正写的时候大家怎么配置都可以 我只是觉着全屏的抽屉 视觉方面更强一点
下边儿的代码是基于uniapp / uview , 里边儿有用了几个uview的组件（u-navbar u-icon，使用的时候可以把这两个删掉 ），小伙伴儿如果用的话可以用别的替代一下
自己在浏览器 / 微信小程序上试了试没问题 其他的还没有试 可以试一下奥

.vue

<template>
    <view class="platDetaList-warp">
        <view class="plat-item">
            <view class="plat-item-menu" :class="drawerIsShow?'menu-animation':'menu-animation-return'">
                <u-navbar id="navbardom" :is-fixed="false" :is-back="false" :border-bottom="false" :background="{ background: '#ffffff' }"></u-navbar>
            </view>

            <view class="plat-item-list" :class="drawerIsShow?'drawer-animation':'drawer-animation-return'">
                <u-navbar id="navbardom" :is-fixed="!navIsFixed?true:false" :is-back="false" :border-bottom="false" :background="{ background: '#ffffff' }">
                    <view class="slot-wrap list-nav">
                        <u-icon name="arrow-left" size="40" style="margin: 0 0 0 10upx;" @click="returnPage"></u-icon>
                        <text>板块列表</text>
                    </view>
                </u-navbar>
                <button @click="openDrawer">打开抽屉</button>
            </view>
            
            <view class="plat-item-mask" :class="drawerIsShow?'mask-animation':'mask-animation-return'"  @click="returnList">
                <view class="return-icon">
                    <u-icon name="arrow-rightward" size="30"></u-icon>
                </view>
            </view>
        </view>
    </view>
</template>

<script> 
export default {
    data() {
        return { 
            drawerIsShow : false , 
            navIsFixed : false
        };
    },
    components:{
        
    },
    onLoad(){ 
    },
    computed: { 
    },
    methods: { 
        openDrawer(){
            this.drawerIsShow = true 
            this.navIsFixed = true 
        },
        returnList(){
            this.drawerIsShow = false
            setTimeout(()=>{ //400毫秒后让导航固定 防止导航瞬间移动
                this.navIsFixed = false
            },400)
        }
    }
};
</script>
 
<style lang="scss" >
    page{
        background-color: #f1f1f1;
        height: 100%;
    }
</style>

<style lang="scss" scoped>

@import "./platDetaList.scss";
</style>

.scss

.platDetaList-warp{
    // background-color: #f1f1f1;
    height: 100%;
    width: 100%;
    overflow: hidden;

    .plat-item{
        position: relative;
        width: 100%;
        height: 100%;
        &-menu{
            position: absolute;
            left: -100%;
            top: 0;
            width: 78%;
            background-color: #ffffff;
            height: 100%;
        }
        
        .menu-animation{
            animation:menuMove 0.4s ease-in-out alternate forwards;
        }
        @keyframes menuMove{ 
            0%{
                left:-100%;
                top: 100upx;
            } 
            100%{
                left: 0;
                top: 0;
            }
        }
        .menu-animation-return{
            animation:menuMoveReturn 0.2s ease-in-out alternate forwards;
        }
        @keyframes menuMoveReturn{ 
            0%{
                left: 0;
                top: 0;
            } 
            100%{
                left:-100%;
                top: 100upx;
            }
        }


        &-list{
            position: absolute;
            right: 0;
            top: 0;
            width: 100%; 
            height: 100%;
            background-color: #ffffff;
            overflow: auto;

            button{
                width: 50%;
            }
        }

        .drawer-animation{ 
            animation:drawerMove 0.3s ease-in-out alternate forwards;
        }
        @keyframes drawerMove{
            0% {
                right:0;
                top: 0;
            }
            100% {
                right: -83%;
                top: 60upx;
            }
        }

        .drawer-animation-return{ 
            animation:drawerMoveReturn 0.4s ease-in-out alternate forwards;
        }
        @keyframes drawerMoveReturn{
            0% {
                right: -83%;
                top: 60upx;
            }
            100% {
                right:0;
                top: 0;
            }
        }


        &-mask{
            position: absolute;
            right: -100%;
            top: 0;
            height: 100%;
            width: 17%;
            background-image: linear-gradient(to right, rgba(0,0,0,0) , rgba(0,0,0,0.4));

            .return-icon{
                position: absolute;
                bottom: 100upx;
                left: 30%;
                border: 4upx solid #ffffff;
                border-radius: 50%;
                width: 70upx;
                height: 70upx;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #ffffff;
            }
        }

        .mask-animation{ 
            animation:maskMove 0.3s ease-in-out alternate forwards;
        }
        @keyframes maskMove{
            0% {
                right: -100%;
                opacity: 0;
            }
            100% {
                right: 0;
                opacity: 1;
            }
        }
        .mask-animation-return{ 
            animation:maskMoveReturn 0.1s ease-in-out alternate forwards;
        }
        @keyframes maskMoveReturn{
            0% {
                right: 0;
                opacity: 1;
            }
            100% {
                right: -100%;
                opacity: 0;
            }
        }
    }

    .list-nav{
        display: flex;
        align-items: center;

        text{
            padding: 0 0 0 14upx;
            font-size: 32upx;
        }

    }
}

gif 图可能需要加载个5 6 秒

目前代码显示效果（不知道为啥录屏为mp4 然后转为gif看着有丝丝卡顿 可能是转gif的时候有问题）：

huadong-qian.gif

按照我要添加的内容添加完后：

huadong-hou.gif