Vant4 BackTop 回到顶部

2023-02-16 17:57 更新

介绍

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

引入

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

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) -


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号