Backtop 回到顶部

用于返回页面顶部的操作按钮。

组件类型

基本用法

由于回到顶部需要实时监听页面滚动位置，通常需要在页面的 onPageScroll 生命周期中获取滚动距离，再通过 scroll-top 传递给组件。

vue

<wd-backtop :scroll-top="scrollTop"></wd-backtop>

ts

import { onPageScroll } from '@dcloudio/uni-app'
import { ref } from 'vue'

const scrollTop = ref(0)

onPageScroll((event) => {
  scrollTop.value = event.scrollTop
})

组件变体

形状与文字

通过 shape 切换圆形或方形按钮，通过 text 显示按钮文字。

<wd-backtop :scroll-top="scrollTop" shape="square" text="TOP"></wd-backtop>

自定义图标

默认插槽可以替换按钮内部内容。

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

组件样式

自定义显示距离

通过 top 设置滚动距离超过多少时显示按钮。

<wd-backtop :scroll-top="scrollTop" :top="600"></wd-backtop>

自定义样式

通过 custom-style 和 icon-style 调整按钮与图标样式。

<wd-backtop :scroll-top="scrollTop" custom-style="background: #007aff;color:white;" icon-style="color: white;"></wd-backtop>

自定义滚动时间

通过 duration 设置返回顶部滚动时长，单位为毫秒。

<wd-backtop :scroll-top="scrollTop" :duration="1000"></wd-backtop>

Backtop Attributes

参数	说明	类型	默认值
scroll-top	页面滚动距离	number	-
text	按钮文字	string	-
top	滚动距离超过该值时显示按钮，单位为 px	number	300
duration	返回顶部滚动时间，单位为 ms	number	100
z-index	组件层级	number	10
icon-style	自定义图标样式	string	''
shape	按钮形状，可选值为 circle、square	string	circle
bottom	距离屏幕底部的距离，单位为 px	number	100
right	距离屏幕右侧的距离，单位为 px	number	20
custom-style	自定义根节点样式	string	''
custom-class	自定义根节点样式类	string	''

Backtop Slots

名称	说明
default	自定义按钮内容

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-backtop-bg	$filled-oppo	背景色
--wot-backtop-border-color	$border-main	边框颜色
--wot-backtop-width	$n-48	按钮宽度
--wot-backtop-height	$n-48	按钮高度
--wot-backtop-radius	$radius-main	方形模式圆角
--wot-backtop-radius-circle	$radius-radius-full	圆形模式圆角
--wot-backtop-color	$icon-main	按钮图标颜色
--wot-backtop-icon-size	$n-20	按钮图标尺寸
--wot-backtop-text-font-size	$typography-label-size-main	文本字号
--wot-backtop-text-color	$text-main	文本颜色
--wot-backtop-text-line-height	$typography-label-line--height-size-main	文本行高
--wot-backtop-z-index	100	组件层级

源代码

文档

• 组件