vant返回顶部 Vant4 BackTop 回到顶部

介绍

返回页面顶部的操作按钮。

引入

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

import { createApp } from "vue";
import { BackTop } from "vant";

const app = createApp();
app.use(BackTop);

代码演示

基础用法

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

<van-cell v-for="item in list" :key="item" :title="item" /> <van-back-top />

export default {
  setup() {
    const list = [...Array(50).keys()];
    return { list };
  },
};

自定义位置

通过 ​right​ 和 ​bottom​ 属性来设置组件距离右侧和底部的位置。

<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top right="15vw" bottom="10vh" />

export default {
  setup() {
    const list = [...Array(50).keys()];
    return { list };
  },
};

自定义内容

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

<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top class="custom">返回顶部</van-back-top>

<style>
  .custom {
    width: 80px;
    font-size: 14px;
    text-align: center;
  }
</style>

export default {
  setup() {
    const list = [...Array(50).keys()];
    return { list };
  },
};

设置滚动目标

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

<div class="container">
  <van-cell v-for="item in list" :key="item" :title="item" />
  <van-back-top target=".container" bottom="30vh" />
</div>

<style>
  .container {
    height: 60vh;
    overflow: auto;
  }
</style>

export default {
  setup() {
    const list = [...Array(50).keys()];
    return { list };
  },
};

API

Props

Slots

类型定义

组件导出以下类型定义：

import type { BackTopProps, BackTopThemeVars } from "vant";

主题定制

样式变量

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