BackTop 回到顶部

引入

通过以下方式来全局注册组件，更多注册方式请参考。

基础用法

请滚动示例页面来查看右下角的返回顶部按钮。

  1. export default {
  2.   setup() {
  3.     const list = [...Array(50).keys()];
  4.   },
  5. };
  1. export default {
  2.   setup() {
  3.     const list = [...Array(50).keys()];
  4.     return { list };
  5.   },
  6. };

自定义内容

使用默认插槽来自定义组件展示的内容。

  1. <van-cell v-for="item in list" :key="item" :title="item" />
  4. <style>
  5.   .custom {
  6.     width: 80px;
  7.     font-size: 14px;
  8.     text-align: center;
  9.   }

设置滚动目标

可以通过 target 属性来设置触发滚动的目标对象，支持传入选择器或 HTMLElement。

  1. <div class="container">
  2.   <van-cell v-for="item in list" :key="item" :title="item" />
  3.   <van-back-top target=".container" bottom="30vh" />
  4. </div>
  7.   .container {
  8.     height: 60vh;
  9.     overflow: auto;
  10.   }
  11. </style>
  1. export default {
  2.   setup() {
  3.     const list = [...Array(50).keys()];
  4.     return { list };
  5.   },
  6. };

Slots

类型定义

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 。