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"
                }
             })
        }
    }
});

.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;
}