Skip to content

Backtop 回到顶部 1.2.21

基本用法

由于返回顶部需要实时监听滚动条位置,但是在uniapp的组件中不能获取页面的滚动信息, 所以只能在页面的onPageScroll生命周期中获取滚动条位置,再通过Props传递给组件。

html
  <wd-backtop :scrollTop="scrollTop"></wd-backtop>
typescript
const scrollTop = ref<number>(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

自定义图标

html
  <wd-backtop :scrollTop="scrollTop">
    <text>TOP<text>
  </wd-backtop>

自定义样式

html
  <wd-backtop :scrollTop="scrollTop" customStyle="background: #007aff;color:white;"></wd-backtop>

Attributes

参数说明类型可选值默认值最低版本
scrollTop页面滚动距离number---
top距离顶部多少距离时显示,单位pxnumber-300-
duration返回顶部滚动时间,单位msnumber-100-
zIndex组件z-index属性number-10-
iconStyle自定义icon样式string---
shape按钮形状stringsquarecircle-
bottom距离屏幕顶部的距离,单位pxnumber-100-
right距离屏幕右边距离,单位pxnumber-20-

外部样式类

类名说明最低版本
custom-class根节点样式-
custom-style根节点样式-

Released under the MIT License.

Released under the MIT License.