layui/example/docs/zh-CN/components/backtop.md
sight 33a1931721 🐛 1. 长按滚动条滑动无法实时显示按钮的问题
🎨 2.优化节流和返回顶部动画
2021-12-23 04:14:24 +08:00

4.9 KiB
Raw Blame History

::: title 基础使用

回到顶部组件的默认样式,通过滑动来查看页面右下角的正方形按钮。

::: ::: demo

:::

:::title 自定义

回到顶部组件可自定义样式限制宽高50px * 50pxshowHeight = 0 将始终显示,disabled 属性禁用返回顶部。查看页面右下角的圆形按钮。

::: demo

:::

::: title 滚动容器

通过设置 targetposition="absolute"参数 ,可对特定容器进行返回顶部操作

::: ::: demo

{{index + ".  layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式"}}

:::

::: title 属性 :::

::: table

属性 说明 类型 可选值
通用属性
target 可选,触发滚动事件的对象 string CSS 选择器 | window(默认)
showHeight 可选,滚动高度达到该值后显示回到顶部按钮 number 200(默认)
disabled 可选,禁用点击返回顶部 boolean true | false(默认)
组件样式
position 可选,定位方式,特定容器内部需设置为 absolute string absolute | fixed(默认)
right 可选,按钮距离页面右边距,单位 px number 30(默认)
bottom 可选,按钮距离页面底部位置,单位 px number 40(默认)
bgcolor 可选,背景颜色 string #9F9F9F(默认)
opacity 可选,不透明度 number 0.0-1.0
color 可选,前景颜色 string #FFFFFF
borderRadius 可选,添加圆角 string 2px(默认)
circular 可选, 使用圆形按钮 boolean true | false(默认)
图标样式
icon 可选,图标类型 string layui-icon-top(默认)
iconSize 可选,图标大小 number 30
iconPrefix 可选,图标前缀 layui-icon layui-icon-top string layui-icon(默认)
iconColor 可选,图标颜色 string #FFFFFF(默认)

:::

::: title 事件 :::

::: table

事件名 说明 回调参数
click 点击回到顶部按钮的回调函数 event

:::

::: title 插槽 :::

::: table

插槽名 说明
自定义内容

:::