Curtain 幕帘


幕帘组件,可以用来放置广告提示内容

使用指南

要求 taro-ui 版本在1.4.0以上,在 Taro 文件中引入组件

  1. import { AtCurtain } from 'taro-ui'

组件依赖的样式文件(仅按需引用时需要)

  1. @import "~taro-ui/dist/style/components/curtain.scss";

一般用法

说明:

  • 该组件为受控组件,组件的开关状态由 isOpened 来控制,开发者需要通过 onClose 事件来更新 isOpened 值变化,从而关闭幕帘。
  1. import Taro from '@tarojs/taro'
    import { View, Image } from '@tarojs/components'
    import { AtCurtain,AtButton } from 'taro-ui'
    import curtainPng from '../../../assets/images/curtain.png'
    export default class TagPage extends Taro.Component {
    constructor () {
    super(...arguments)
    this.state = {
    isOpened: false,
    }
    }
    handleChange () {
    this.setState({
    isOpened: true
    })
    }
    onClose () {
    this.setState({
    isOpened: false
    })
    }
    render () {
    return (
    <AtCurtain
    isOpened={this.state.isOpened}
    onClose={this.onClose.bind(this)}
    >
    <Image
    style='width:100%;height:250px'
    src={curtainPng}
    />
    </AtCurtain>
    <AtButton
    onClick={this.handleChange.bind(this)}>
    右上关闭幕帘
    </AtButton>
    )
    }
    }

参数

参数说明类型可选值默认值
isOpened是否开启Boolean-false
closeBtnPosition关闭图标位置String'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'bottom

事件

事件名称说明返回参数
onClose点击关闭按钮触发事件event

Curtain幕帘 - 图1