reader/components/popUp/index.js

Component({
    data: {
        //弹窗显示控制 
        showModalStatus: false,
        animationData: {},
        height: 0
    },
    lifetimes: {
        attached() {
            wx.getSystemInfo({
                success: (res) => {
                    this.setData({
                        height: res.windowHeight * 0.7
                    })
                }
            })
        }
    },
    methods: {
        //底部弹出框
        showModal() {
            // 背景遮罩层
            var animation = wx.createAnimation({
                duration: 200,
                timingFunction: "linear",
                delay: 0
            })
            animation.translateY(this.data.height).step()
            this.setData({
                animationData: animation.export(),
                showModalStatus: true
            })
            setTimeout(function () {
                animation.translateY(0).step()
                this.setData({
                    animationData: animation.export()
                })
            }.bind(this), 200)
        },

        //点击背景面任意一处时，弹出框隐藏
        hideModal: function () {
            //弹出框消失动画
            var animation = wx.createAnimation({
                duration: 200,
                timingFunction: "linear",
                delay: 0
            })
            animation.translateY(this.data.height).step()
            this.setData({
                animationData: animation.export(),
            })
            this.triggerEvent('close')
            setTimeout(function () {
                animation.translateY(0).step()
                this.setData({
                    animationData: animation.export(),
                    showModalStatus: false
                })
            }.bind(this), 200)
        },
    }
})