微信小程序遮罩层弹出组件示例（优惠券弹出案例）

1、从页面底部弹出，背景带遮罩层

WXML

JS

Component({
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    properties: {
        show:{
            type:Boolean,
            value:false,
        },
        title:{
            type:String,
            value:'',
        },
        height:{
            type:String,
            value:'',
        }
    },
    observers:{
        show(val){
            if(val){
                this.showFrame();
            }
        }
    },
    data: {
        customStyle:"height: 70%;overflow: auto;",
        wrapAnimate: '', 
        frameAnimate: '' 
    },
    methods: {
        showFrame() {
            this.setData({
                // show: true,
                wrapAnimate: 'wrapAnimate',
                frameAnimate: 'frameAnimate'
            });
            wx.setPageStyle({
                style: {
                  overflow: "hidden" //禁用页面层滚动
                }
             })
        },
        hideFrame(e) {
            let that = this
            this.setData({
                wrapAnimate: 'wrapAnimateOut', 
                frameAnimate: 'frameAnimateOut' ,
            });
            //this.triggerEvent('hideFrame',{show:false});
            setTimeout(()=>{ //动画效果
                this.triggerEvent('hideFrame')
            },200)
            wx.setPageStyle({
                style: {
                  overflow: "auto"
                }
             })
        }
    }
});

WXSS

.pop_content .pop_content_close{
    position: absolute;
    right: 16rpx;
    top: 20rpx;
    font-size: 40rpx;
}
.wrap {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.wrapAnimate {
    animation: wrapAnimate 0.5s ease-in-out forwards
}
 
@keyframes wrapAnimate {
    0% {}
 
    100% {
        background: rgba(0, 0, 0, 0.35);
    }
}
.wrapAnimateOut {
    animation: wrapAnimateOut 0.2s ease-in-out forwards
}
 
@keyframes wrapAnimateOut {
    0% {
        background: rgba(0, 0, 0, 0.35);
    }
 
    100% {
        background: rgba(0, 0, 0, 0);
    }
}
.frame-wrapper {
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 2;
    top: 50vh;
}
.frameAnimate {
    animation: frameAnimate 0.5s ease forwards;
}
 
@keyframes frameAnimate {
    0% {}
 
    100% {
        opacity: 1;
        top: 0vh;
    }
}
 
.frameAnimateOut {
    animation: frameAnimateOut 0.2s ease forwards;
}
 
@keyframes frameAnimateOut {
    0% {
        opacity: 1;
        top: 0vh;
    }
 
    100% {
        opacity: 0;
        top: 100vh;
    }
}
.frame {
    background: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    z-index: 3;
    padding-bottom: 40rpx;
}

如何使用： 

    
    
            我是标题
        
        
            内容
        
    
 
 hideFrame(e){
        this.setData({
            show:  e.detail.show,
        })
    },