微信小程序自定义弹窗组件 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的主要内容,如果未能解决你的问题,请参考以下文章