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

Posted aiguangyuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序自定义弹窗组件 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 显示的变量。

以上是关于微信小程序自定义弹窗组件 action-sheet的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

微信小程序 自定义弹窗

微信小程序之自定义模态弹窗(带动画)实例

微信小程序封装自定义弹窗

微信小程序自定义picker组件

微信小程序中的自定义组件 以及 相关的坑