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

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

以下是这个组件的实现：

1. 组件的 index.js 代码；

// components/action-sheet/index.jsComponent({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相关推荐

微信小程序自定义弹窗组件
看微信小程序的文档觉得说的不是很清楚.于是,找到这篇文章,觉得挺好看.大家可以看看: https://www.cnblogs.com/demod... 补充: 还需要在popup.json文件添加一句 ...
html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放
小程序自定义音频组件,带滚动条摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的而微信小程序API给我们提供的就是这样的而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
微信小程序点击按钮弹出弹窗_微信小程序自定义弹窗(可通用)
本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗. 点击弹窗布局外消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果(本文为自下而上弹出). (后续可能会补充新需求,或可以留言讨论你的需求 ...
微信小程序-自定义NavBar组件
组件化组件化本身是一个可以讲的很大,也可以浓缩为封装可复用的,模版组件基于mvvm的微信小程序当然也支持这一特性,我们做项目的时候也可以把注入公用的header footer之类的封一封(其实工 ...
微信小程序自定义倒计时组件及注意事项
倒计时功能实现:微信小程序实现倒计时功能(超简单)_洛潆的博客-CSDN博客_微信小程序倒计时功能由于要在多个页面使用倒计时功能,在每个页面都重新写一遍就会很麻烦,所以可以把它封装为自定义组件,最终 ...
微信小程序自定义波浪组件
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的 ...

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

微信小程序自定义弹窗组件 action-sheet相关推荐

最新文章

热门文章