t-back-top

BackTop 回到顶部

组件介绍

t-back-top 用于在页面滚动一定距离后显示返回顶部按钮，点击后页面平滑滚动回顶部。适用于长列表页面，方便用户快速返回页面顶部。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/back-top/back-top.uvue，通过 scrollTop 属性控制显示/隐藏，滚动超过 400rpx 时自动显示。

<template>
  <view class="back-top-demo">
    <t-scroll :scrollTop="scrollTop" @scroll="onScroll">
      <view class="content">
        <t-list-item v-for="i in 50" :key="i" title="列表项 {{i}}"></t-list-item>
      </view>
    </t-scroll>
    
    <!-- 返回顶部按钮 -->
    <t-back-top :scrollTop="scrollTop" type="primary" icon="top"></t-back-top>
  </view>
</template>

<script setup>
const scrollTop = ref(0);

function onScroll(e) {
  scrollTop.value = e.detail.scrollTop;
}
</script>

<style scoped>
.back-top-demo {
  height: 100vh;
  position: relative;
}
</style>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'large'
scrollTop	滚动组件的 scrollTop 值	number	0
icon	返回按钮的图标名称	string	'rocketline'
iconClass	图标样式类	string	''

Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

Slots

插槽名	说明
default	自定义返回顶部按钮内容，默认显示图标

外部类

类名	说明
icon-class	图标样式类