微信小程序自定义弹窗组件 action-sheet

最近公司在开发短剧小程序，短剧的剧集展示交互需要用到组件 action-sheet，小程序自带的有这个组件，但是这个组件支持的功能比较单一，相当于是一个选择表一样，不能自定义很多内容，只能自定义一个组件来使用。

 以下是这个组件的实现：

1. 组件的 index.js 代码；

// components/action-sheet/index.js

Component({

    data: {
        show: false,
        animation: "",
        maskAnimation: ''
    },

    properties: {
        actionShow: Boolean
    },

    observers: {
        'actionShow': function (newValue) {
            this.setData({
                show: newValue,
                animation: newValue === true ? 'show-action-sheet' : 'hide-action-sheet',
                maskAnimation: newValue === true ? 'show-mask-animation' : 'hide-mask-animation'
            })
        }
    },

    methods: {
        cancelAction() {
            this.setData({
                animation: 'hide-action-sheet',
                maskAnimation: 'hide-mask-animation'
            })
            setTimeout(() => {
                this.setData({
                    show: false
                })
            }, 300);
        }
    }
})

2. 组件的 index.wxml 代码；

<!-- components/action-sheet/index.wxss -->

<view class="action-sheet {{maskAnimation}}" hidden="{{!show}}" bindtap="cancelAction">
    <view class="container {{animation}}">
        <slot></slot>
    </view>
</view>

4. 组件的 index.wxss 代码；

/* components/action-sheet/index.wxss */

.action-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.container {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 70%;
    background-color: #fcf8f8;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
}



.show-action-sheet {
    animation-name: show-animation;
    animation-duration: 0.25s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.hide-action-sheet {
    animation-name: hide-animation;
    animation-duration: 0.25s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.show-mask-animation {
    animation-name: show-mask;
    animation-duration: 0.25s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.hide-mask-animation {
    animation-name: hide-mask;
    animation-duration: 0.25s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes show-animation {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes hide-animation {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes show-mask {
    from {
        opacity: 0;
    }

    to {
        opacity: 1.0;
    }

}

@keyframes hide-mask {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0;
    }
}

5. 组件的 index.json 配置；

{
  "component": true,
  "usingComponents": {}
}

6. 组件的使用；

在要使用组件的json文件中引入自定义的 action-sheet 组件：

{  
    "usingComponents": {
        "x-action-sheet": "./components/action-sheet/index"
    },
    "navigationStyle" : "custom"
}

在wxml文件中使用组件：

<x-action-sheet actionShow="{{rechargeActionShow}}">
        
    <!--自定义的内容-->

</x-action-sheet>

rechargeActionShow 为控制 action-sheet 显示的变量。