Curtain 幕帘

---

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

使用指南

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

import { AtCurtain } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

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

一般用法

说明：

• 该组件为受控组件，组件的开关状态由 isOpened 来控制，开发者需要通过 onClose 事件来更新 isOpened 值变化,从而关闭幕帘。

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