跳到主要内容

PullView 弹窗

可以从上下左右4个方向弹出内容

示例

import { PullView } from '@/duxapp'

const Example = () => {

const [show, setShow] = useState(false)

const pullView = useRef()

return <>
<Text onClick={() => setShow(true)}>弹窗</Text>
{show && <PullView ref={pullView} onClose={() => setShow(false)}>
<Column className='bg-page r-3 gap-2' style={{ height: px(1200) }}>
<Text align='center' className='mt-3' bold>说明</Text>
<Text onClick={() => pullView.current.close()}>使用实例方法关闭</Text>
<ScrollView>
... 内容
</ScrollView>
</Column>
</PullView>}
</>
}

Props

side

从什么方向进行弹出

center 是将组件弹出到屏幕中间

类型必填默认值
enum('bottom', 'top', 'left', 'right', 'center')bottom

overlayOpacity

空白区域的不透明度,0-1

类型必填默认值
number0.5

mask

是否锁定模态框 设置为true点击空白区域无法关闭模态框

类型必填默认值
booleanfalse

masking

是否显示遮罩层,默认显示,设置为false隐藏遮罩层,隐藏后,可以后面的内容是可以点击的

无法点击遮罩层进行关闭,需要手动关闭弹框

类型必填默认值
booleantrue

duration

动画持续时长

类型必填默认值
number200

group

分组,这个字段相同的 PullView Modal 等组件将会以队列的形式显示

这是TopView 的add方法参数

类型必填默认值
string

style

弹出层内层样式

类型必填默认值
CSSProperties

onClose

点击遮罩关闭时的回调函数

类型必填默认值
() => void

实例方法

close()

用于关闭弹窗