微信小程序动画实现自定义底部弹出框

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

维护世界和平的程序员

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

阅读量858

点赞数 1

分类专栏：微信小程序文章标签： animation 小程序 js

本文链接：https://blog.csdn.net/qq_41582351/article/details/104272074

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

话不多说，先上效果图

在这里插入图片描述

1 首先，在js里写一个函数来实现简单的上滑和下滑动画

tapCoupon: function () {
        console.log(1);
        console.log(this.data.coupon_height)
        var ani = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease',
            delay: 0
        });
        if (!this.data.status) {
            ani.opacity(1).translate(0, -this.data.coupon_height).step()
            this.setData({
                animation: ani.export(),
                status: !this.data.status
            })
        } else if (this.data.status) {
            ani.opacity(1).translate(0, 0).step()
            this.setData({
                animation: ani.export(),
                status: !this.data.status
            })
        }
    },

2 接着，我们在wxml里这样写：

（1）在wxss里把盒子设为position:fixed;在来wxml里这样写

注意：coupon_height 是通过js动态获取这个元素的高度，想知道如何获取盒子的高度请看微信小程序通过js动态获取节点信息
在这里插入图片描述

在这里插入图片描述

（2）在 2 处声明一个动画

3 点击完成，动画下滑

tapFinish: function () {
        var ani = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease',
            delay: 0
        });
        ani.opacity(1).translate(0, 0).step()
        this.setData({
            animation: ani.export(),
            status: !this.data.status
        })
    },