Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】

Overlay 遮罩层

提供一个简单的 Overlay 遮罩层，在页面上的层级为 1026;

1. 使用指南

在 Taro 文件中引入组件，将组件放入src下的components文件夹中

import RuiOverlay from "../../components/RuiOverlay/RuiOverlay";

2. 基础用法

2.1 组件使用

{/* 基本案例 */}
<RuiOverlay isOpened={isShowBase}onClose={() => { this.setState({ isShowBase: false }) }} />

2.2 显示遮罩层

<View className="rui-flex-ac rui-list-item"onClick={() => { this.setState({isShowBase: true}) }}><Text className="rui-fs30 rui-fg">基本案例</Text><Text className="rui-icon rui-icon-arrow-right rui-fa rui-fs30"></Text>
</View>

3. 嵌入内容居中

3.1 组件使用

{/* 嵌入内容居中 */}
<RuiOverlay isOpened={isShowContent}onClose={() => { this.setState({isShowContent: false}) }}><View className="rui-flex-cc"style={`background:#fff;width:100px;height:100px;`}>123456</View>
</RuiOverlay>

3.2 显示遮罩层

<View className="rui-flex-ac rui-list-item"onClick={() => { this.setState({isShowContent: true}) }}><Text className="rui-fs30 rui-fg">嵌入内容居中</Text><Text className="rui-icon rui-icon-arrow-right rui-fa rui-fs30"></Text>
</View>

4. 嵌入内容底部

4.1 组件使用

{/* 嵌入内容底部 */}
<RuiOverlay isOpened={isShowBottom}position="bottom"onClose={() => { this.setState({isShowBottom: false}) }}><View className="rui-flex-cc"style={`background:#fff;width:100%;height:50vh;`}>123456</View>
</RuiOverlay>

4.2 显示遮罩层

<View className="rui-flex-ac rui-list-item"onClick={() => { this.setState({isShowBottom: true}) }}><Text className="rui-fs30 rui-fg">嵌入内容底部</Text><Text className="rui-icon rui-icon-arrow-right rui-fa rui-fs30"></Text>
</View>

5. 设置透明度

5.1 组件使用

{/* 设置透明度 */}
<RuiOverlay isOpened={isShowOpacity}onClose={() => { this.setState({isShowOpacity: false}) }}opacity="0.5" />

5.2 显示遮罩层

<View className="rui-flex-ac rui-list-item"onClick={() => { this.setState({isShowOpacity: true}) }}><Text className="rui-fs30 rui-fg">设置透明度</Text><Text className="rui-icon rui-icon-arrow-right rui-fa rui-fs30"></Text>
</View>

6. 设置动画时间

6.1 组件使用

{/* 设置动画时间 */}
<RuiOverlay isOpened={isShowDuration}duration={1000}onClose={() => { this.setState({isShowDuration: false}) }}/>

6.2 显示遮罩层

<View className="rui-flex-ac rui-list-item"onClick={() => { this.setState({isShowDuration: true}) }}><Text className="rui-fs30 rui-fg">设置动画时间</Text><Text className="rui-icon rui-icon-arrow-right rui-fa rui-fs30"></Text>
</View>

7. RuiOverlay 参数

参数	说明	类型	可选值	默认值
isOpened	是否显示遮罩层	Boolean	-	false
zIndex	页面上的层级	Number	-	1026
opacity	遮罩层的透明度	Number	-	0.4
position	内容所在位置	String	top、left、right、bottom、center	center
duration	渐入渐出动画时长	Number	-	300

8. RuiOverlay 事件

事件名称	说明	返回参数
onClose	触发关闭时的事件	-

Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】相关推荐

Unity Mecanim动画系统之动画层（Layers）和动画遮罩（Avatar Mask）的简单使用
Unity Mecanim动画系统之动画层(Layers)和动画遮罩(Avatar Mask)的简单使用目录 Unity Mecanim动画系统之动画层(Layers)和动画遮罩(Ava ...
Taro React组件开发（2） —— RuiEditor 富文本编辑器【兼容H5和微信小程序】
1. 富文本编辑器需求分析需要实现图片上传显示,上传使用Taro的 chooseImage 和 uploadFile,完成图片的上传!!! 文字的居左.居中.居右展示,使用格式化方法 format! ...
react 组件引用组件_动画化React组件
react 组件引用组件 So, you want to take your React components to the next level? Implementing animations c ...
微信小程序Taro + React开发实践
微信小程序Taro + React开发实践微信小程序原生开发有一套自己的规范和写法,开发体验十分类似Vue,但如果你想减少学习成本,那么Taro框架是一个在此基础上又封装了一层的轮子,从社区热度到开 ...
【课程设计】基于Taro+React+Springboot+TaroUI+Python爬虫的网络音乐播放小程序详细设计实现
[课程设计]基于Taro+React+Springboot+TaroUI+Python爬虫的网络音乐播放小程序详细设计实现解决触摸穿透自定义导航栏文章目录项目简介功能截图 1.用户登录注册 ...
编写react组件_React组件的“黄金法则”如何帮助您编写更好的代码
编写react组件以及钩子如何发挥作用 (And how hooks come into play) Recently I've adopted a new philosophy that chan ...
react页面数据过多怎么办_性能！！让你的 React 组件跑得再快一点，收藏
性能和渲染(Render)正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配合,实现了对 DOM 最小粒度的更新.大多数情况下,React 对 DOM 的渲染效率足以我们的业务日常. ...
React组件设计实践总结05 - 状态管理
今天是 520,这是本系列最后一篇文章,主要涵盖 React 状态管理的相关方案. 前几篇文章在掘金首发基本石沉大海, 没什么阅读量. 可能是文章篇幅太长了?掘金值太低了? 还是错别字太多了? 后面静 ...
使用 Jest 和 Enzyme 测试 React 组件
type: FrontEnd title: Testing React components with Jest and Enzyme link: hackernoon.com/testing-rea ...

Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】

Overlay 遮罩层

1. 使用指南

2. 基础用法

2.1 组件使用

2.2 显示遮罩层

3. 嵌入内容居中

3.1 组件使用

3.2 显示遮罩层

4. 嵌入内容底部

4.1 组件使用

4.2 显示遮罩层

5. 设置透明度

5.1 组件使用

5.2 显示遮罩层

6. 设置动画时间

6.1 组件使用

6.2 显示遮罩层

7. RuiOverlay 参数

8. RuiOverlay 事件

Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】相关推荐

最新文章

热门文章