BackTop 返回顶部

悬浮返回顶部控件，当页面向下滚动超过指定阈值时自动平滑浮现，点击直达顶部。支持图标自定义 (icon)、辅助说明文字 (text) 及默认插槽自定义 DOM。

---

代码示例

1. 基础用法 (Basic BackTop)

<template>
  <view>
    <!-- 页面内容 -->

    <!-- 返回顶部控件 -->
    <mu-back-top :threshold="150" icon="arrow-up" text="TOP" />
  </view>
</template>

---

2. 自由插槽自定义 (Custom Slot)

可通过默认插槽完全自定义返回顶部悬浮按钮的外观与交互。

<template>
  <mu-back-top :threshold="100">
    <view class="custom-back-btn">
      <mu-icon name="rocket" :size="24" color="#FFFFFF" />
    </view>
  </mu-back-top>
</template>

<style scoped>
.custom-back-btn {
  width: 90rpx;
  height: 90rpx;
  border-radius: 45rpx;
  background: #171717;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.25);
}
</style>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
icon	矢量图标名称	String	-	'arrow-up'
iconSize	图标尺寸	Number | String	-	22
iconColor	图标颜色	String	-	''
text	辅助说明文字	String	-	''
textColor	说明文字色彩	String	-	''
background	按钮背景颜色	String	-	''
bottom	距离屏幕底部距离 (rpx)	Number | String	-	120
right	距离屏幕右侧距离 (rpx)	Number | String	-	40
threshold	触发显示所需的页面滚动高度 (px)	Number	-	150
duration	返回顶部的平滑滚动过渡时长 (ms)	Number	-	300

---

插槽说明 (Slots)

插槽名	说明
default	完全自定义返回顶部按钮节点

---

事件说明 (Events)

事件名	说明	回调参数
click	点击返回顶部按钮时触发	-

---

实例方法 (Expose Methods)

在小程序端（非 H5）页面的 onPageScroll 生命周期中，需手动调用该方法传递滚动数据：

<script setup>
import { ref } from 'vue'
const backTopRef = ref(null)

onPageScroll((e) => {
  backTopRef.value?.onPageScroll(e)
})
</script>

<template>
  <mu-back-top ref="backTopRef" />
</template>

方法名	说明	参数
onPageScroll(e)	传入页面 onPageScroll 事件对象，小程序端必须手动调用	{ scrollTop: number }