qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

FloatLayout 浮动弹层

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

使用指南

在 Taro 文件中引入组件

import { AtFloatLayout } from 'taro-ui-vue3'

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

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

一般用法

<template>
  <view>
    <AtFloatLayout 
      isOpened 
      title="这是个标题" 
      @close="handleClose"
    >
      这是内容区 随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
      随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写
    </AtFloatLayout>
  </view>
</template>

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 事件-