BackTop 返回顶部

参考 uniapp-components 的 BackTop 交互，只保留一个实际可用的返回顶部实例，通过按钮切换当前样式并在长内容区域里验证显隐与回顶。

返回顶部组件，固定在页面右下角，点击后返回页面顶部

演示

9:41

代码示例

<!-- 滚动测试区 {{ i }} -->
  <re-back-top class="demo-fixed" :theme="currentType" :text="currentText" :fixed="true" :scroll-top="scrollTop" :visibility-height="visibilityHeight" @click="onBackTopClick" @to-top="onToTop" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-back-top />。

API

BackTop Props

名称类型默认值描述必传
fixedbooleantrue是否固定定位N
themeThemeName"round"主题风格，可选值：round/half-round/round-dark/half-round-dark，default 会映射到 round，primary 会映射到 round-darkN
targetstring""监听滚动条的目标元素选择器，为空时监听页面滚动N
scrollTopnumber-1当前滚动距离，受控模式下用于控制显隐N
visibilityHeightnumber200滚动高度达到此值后显示N
textstring""按钮文字内容N
customStylestring""自定义样式N

BackTop Events

名称参数描述
click-点击返回顶部时触发
to-top-点击触发返回顶部意图

BackTop Slots

名称描述
--
Typography 排版
排版组件，支持 type 类型、主题色(含 mark 标记)、字重、对齐、复制和省略展开收起
FixedNav 悬浮导航
参考 NutUI fixednav 示例，支持右侧、左侧、无遮罩与自定义按钮/列表。