微信小程序调用api实现弹出层动画

最新推荐文章于 2024-08-15 23:03:45 发布

明知山_

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量747

点赞数

分类专栏： Weapp

本文链接：https://blog.csdn.net/AK852369/article/details/106428894

版权

Weapp 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<button bindtap="showModal">Click Me</button>
<view class="pop" wx:if="{{showPop}}">
    <view class="popbg" bindtap="hideModal"></view>
    <view class="popup" animation="{{animationData}}">内容</view>
</view>

.popbg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 500rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
}

Page({
    data: {
        showPop: false,
        animationData: {},
    },
    // 显示遮罩层
    showModal() {
        var animation = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease'
        })
        animation.translateY(500).step()
        this.setData({
            animationData: animation.export(),
            showPop: true
        })
        setTimeout(() => {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export(),
            })
        }, 50)
    },

    // 隐藏遮罩层
    hideModal() {
        var animation = wx.createAnimation({
            duration: 500,
            timingFunction: 'linear'
        })
        animation.translateY(500).step()
        this.setData({
            animationData: animation.export()
        })
        setTimeout(() => {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export(),
                showPop: false
            })
        }, 400)
    },
})