Backtop

Button for returning to the top of the page.

Component Type

Basic Usage

Since backtop needs to monitor page scroll position in real-time, it usually requires getting scroll distance in the page's onPageScroll lifecycle, then passing it to the component via 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
})

Component Variant

Shape and Text

Switch between circle or square button via shape, display button text via text.

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

Custom Icon

Default slot can replace button internal content.

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

Component Style

Custom Display Distance

Set the scroll distance threshold to show button via top.

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

Custom Style

Adjust button and icon styles via custom-style and icon-style.

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

Custom Scroll Duration

Set return to top scroll duration via duration, unit is milliseconds.

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

Backtop Attributes

Parameter	Description	Type	Default Value
scroll-top	Page scroll distance	number	-
text	Button text	string	-
top	Show button when scroll distance exceeds this value, unit is px	number	300
duration	Return to top scroll time, unit is ms	number	100
z-index	Component z-index	number	10
icon-style	Custom icon style	string	''
shape	Button shape, optional values are circle, square	string	circle
bottom	Distance from screen bottom, unit is px	number	100
right	Distance from screen right, unit is px	number	20
custom-style	Custom root node style	string	''
custom-class	Custom root node style class	string	''

Backtop Slots

Name	Description
default	Custom button content

主题定制

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	组件层级

Source Code

Documentation

• Component