Vant4 Vant4 BackTop 回到顶部

2024-02-25 开发教程 Vant4 匿名 5℃

介绍

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

引入

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

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

参数	说明	类型	默认值
target	触发滚动的目标对象，支持传入选择器或 DOM 元素	string \| HTMLElement	-
right	距离页面右侧的距离，默认单位为 `px`	number \| string	`30`
bottom	距离页面底部的距离，默认单位为 `px`	number \| string	`40`
offset	滚动高度达到此参数值时才显示组件	number	`200`
teleport	指定挂载的节点，等同于 Teleport 组件的 to 属性	string \| Element	`body`

Slots

名称	说明
default	自定义按钮显示内容

类型定义

组件导出以下类型定义：

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

主题定制

样式变量

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

名称	默认值	描述
--van-back-top-size	40px	-
--van-back-top-icon-size	20px	-
--van-back-top-right	30px	-
--van-back-top-bottom	40px	-
--van-back-top-text-color	#fff	-
--van-back-top-background	var(--van-blue)	-

上一节： Vant4 TreeSelect 分类选择

下一节： Vant4 AddressEdit 地址编辑

"Vant4"的目录