提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

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

动画组件React 使用 遮罩 Overlay Taro
2023-06-13 09:14:30 时间

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

触发关闭时的事件

-

相关文章