小程序从上至下弹出对话框

结构：蒙层+对话框

   <!-- 底部弹出框 -->
        <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>

        <!-- 从上至下的弹窗-->
        <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
           
        </view>

样式：

/*蒙层的结构，目的是覆盖整个手机界面*/
.commodity_screen {     
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.2;
    overflow: hidden;
    z-index: 1000;
    color: #fff;
}
/*对话框结构*/
.commodity_attr_box {
    width: 100%;
    height:200rpx;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background: #fff;
    padding-top: 20rpx;
}

js:

    // 隐藏遮罩层
    hideModal: function() {
        
        var animation = wx.createAnimation({
            duration: 200,
            timingFunction: "linear",
            delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
            animationData: animation.export(),
        })
        setTimeout(function() {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export(),
                showModalStatus: false
            })
        }.bind(this), 200)
    },

/*显示*/
    showModal: function() {
        var animation = wx.createAnimation({
            duration: 200,
            timingFunction: "linear",
            delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
            animationData: animation.export(),
            showModalStatus: true
        })
        setTimeout(function() {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export()
            })
        }.bind(this), 200)
    },

记得在data里声明animationData: '',,showModalStatus:''