FloatLayout 浮动弹层


提供 浮动布局 的功能,在页面上的层级为 810

使用指南

在 Taro 文件中引入组件

  1. import { AtFloatLayout } from "taro-ui"

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

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

一般用法

  1. <AtFloatLayout isOpened title="这是个标题" onClose={this.handleClose.bind(this)}>
    这是内容区 随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
    随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写
    </AtFloatLayout>

AtFloatLayout 参数

参数说明类型可选值默认值
title元素的标题String--
isOpened控制是否出现在页面上Boolean-false
scrollY是否垂直滚动Boolean-false
scrollX是否水平滚动Boolean-false
scrollTop设置竖向滚动条位置Boolean-false
scrollLeft设置横向滚动条位置Boolean-false
upperThreshold距顶部/左边多远时,触发 scrolltolower 事件Boolean-false
lowerThreshold距底部/右边多远时,触发 scrolltolower 事件Boolean-false
scrollWithAnimation在设置滚动条位置时使用动画过渡Boolean-false

AtFloatLayout 事件

事件名称说明返回参数
onClose元素被关闭时候触发的事件-
onScroll滚动时触-
onScrollToUpper滚动到顶部/左边,会触发 onScrollToUpper 事件-
onScrollToLower滚动到底部/右边,会触发 onScrollToLower 事件-

FloatLayout浮动弹层 - 图1