ball-applet/commpents/drawer/index.js

// commpents/drawer/index.js
/**
 * show:控制显示的变量
 * list:数据列表
 * label:显示选项的内容,默认 label 属性
 * key:选择后获取的值. 为空的话,返回当前选中的选项
 * bind:select:选中后的参数
 */
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        // 是否显示
        show: {
            type: Boolean,
            observer: function (val) {
                this.setData({ showModalStatus: val })
            }
        },
        // 选项列表
        list: { type: Array },
        // 显示的属性
        label: { type: String, value: 'label' },
        // 获取的键名,不写就全返回
        key: { type: String }
    },

    /**
     * 组件的初始数据
     */
    data: {
        showModalStatus: false
    },

    /**
     * 组件的方法列表
     */
    methods: {
        selectValue(e) {
            const data = e?.target?.dataset?.value
            const key = this.properties.key;
            if (key) {
                const value = data[key];
                if (value) {
                    this.triggerEvent('select', value)
                    this.setData({ show: false, showModalStatus: false })
                    return;
                } else {
                    console.log('对象中没有指定的属性')
                }
            }
            this.triggerEvent('select', data)
            this.setData({ show: false, showModalStatus: false })
        },

        powerDrawer: function (e) {
            var currentStatu = e.currentTarget.dataset.statu;
            this.util(currentStatu)
        },
        util: function (currentStatu) {
            /* 动画部分 */
            // 第1步：创建动画实例 
            var animation = wx.createAnimation({
                duration: 200,  //动画时长
                timingFunction: "linear", //线性
                delay: 0  //0则不延迟
            });

            // 第2步：这个动画实例赋给当前的动画实例
            this.animation = animation;

            // 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是240px)，停
            animation.translateY(240).step();

            // 第4步：导出动画对象赋给数据对象储存
            this.setData({
                animationData: animation.export()
            })

            // 第5步：设置定时器到指定时候后，执行第二组动画
            setTimeout(function () {
                // 执行第二组动画：Y轴不偏移，停
                animation.translateY(0).step()
                // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
                this.setData({
                    animationData: animation
                })

                //关闭抽屉
                if (currentStatu == "close") {
                    this.setData(
                        {
                            showModalStatus: false,
                            show: false
                        }
                    );
                }
            }.bind(this), 200)
            // 显示抽屉
            if (currentStatu == "open") {
                this.setData(
                    {
                        showModalStatus: true
                    }
                );
            }
        }
    }
})