NaEasy UI

Appearance

BackToTop 返回顶部 ​

介绍 ​

返回页面顶部的操作按钮，适用于长页面内容浏览场景。

导入 ​

js
import BackToTop from '@/components/feedback/BackToTop.vue'

用法 ​

页面滚动 ​

最简单的使用方式，组件会自动监听页面滚动，当滚动距离超过阈值时显示。

vue
<template>
  <Cell
    v-for="(value,i) in data"
    :key="i"
    :title="value"
  />
  <BackToTop />
</template>

<script setup lang="ts">
import Cell from '@/components/basic/Cell.vue';
import BackToTop from '@/components/feedback/BackToTop.vue';

const data = [
  '向下滚动查看更多内容',
  'Robert Davis',
  'Sandra Allen',
  // ...更多数据
];
</script>

容器滚动 ​

通过 customScrollValue 属性和 onScroll 方法可以实现对自定义滚动容器的监听。

vue
<template>
  <scroll-view 
    style="height:60vh"
    :scroll-top="backToTop1?.customScrollTop.value" 
    scroll-y
    @scroll="backToTop1?.onScroll"
  >
    <Cell
      v-for="(value,i) in data"
      :key="i"
      :title="value"
    />
  </scroll-view>
  <BackToTop ref="backToTop1" customScrollValue />
</template>

<script setup lang="ts">
import Cell from '@/components/basic/Cell.vue';
import BackToTop, { type BackToTopInstance } from '@/components/feedback/BackToTop.vue';
import { ref } from 'vue';

const backToTop1 = ref<BackToTopInstance>();
const data = [/* 数据列表 */];
</script>

自定义位置 ​

通过 right 和 bottom 属性可以自定义组件的位置。

vue
<template>
  <Cell
    v-for="(value,i) in data"
    :key="i"
    :title="value"
  />
  <BackToTop
    right="20vw"
    bottom="40vh"
  />
</template>

<script setup lang="ts">
import Cell from '@/components/basic/Cell.vue';
import BackToTop from '@/components/feedback/BackToTop.vue';

const data = [/* 数据列表 */];
</script>

自定义渲染 ​

通过默认插槽可以完全自定义返回顶部按钮的外观。

vue
<template>
  <Cell
    v-for="(value,i) in data"
    :key="i"
    :title="value"
  />
  <BackToTop
    right="20vw"
    bottom="0"
  >
    <view class="my-back-to-top">
      <text>TOP</text>
    </view>
  </BackToTop>
</template>

<script setup lang="ts">
import Cell from '@/components/basic/Cell.vue';
import BackToTop from '@/components/feedback/BackToTop.vue';

const data = [/* 数据列表 */];
</script>

<style lang="scss">
.my-back-to-top {
  width: 100rpx;
  height: 100rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  background-color: #2f61be;
    text-align: center;

  text {
    font-size: 20px;
    line-height: 100rpx;
    text-align: center;
    color: #fff;
  }
}
</style>

API 参考 ​

BackToTop ​

返回顶部按钮组件。

Props ​

名称说明类型必填默认值
right组件距离右侧的距离number | string-40
bottom组件距离底部的距离number | string-40
showScrollValue当容器滚动距离大于该值时显示组件(像素)number-200
zIndex组件的z-indexnumber-100
customScrollValue是否自定义监听滚动容器，否则为监听页面滚动boolean-false
icon内部显示的图标string-'arrow-up-bold'
iconColor内部图标颜色string-'white'
innerStyle内部图标样式ViewStyle--

Slots ​

名称说明
default自定义返回顶部按钮的内容

Events ​

名称说明参数
click点击按钮时触发$event
show按钮显示时触发-
hide按钮隐藏时触发-

实例方法 ​

通过 ref 可以获取到 BackToTop 实例并调用实例方法。

typescript
interface BackToTopInstance {
  /**
   * 滚动事件，用于自定义滚动容器
   * @param e 滚动事件对象
   */
  onScroll: (e: any) => void;

  /**
   * 自定义滚动容器的滚动距离
   */
  customScrollTop: Ref<number>;
}

主题变量 ​

名称类型默认值说明
BackToTopButtonWidthnumber80按钮宽度
BackToTopButtonHeightnumber80按钮高度
BackToTopButtonBoxShadowstring0 0 8px 0 rgba(0,0,0,0.2)按钮阴影
BackToTopButtonBackgroundColorstringprimary按钮背景颜色