codecamp

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

参数 说明 类型 默认值
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 地址编辑
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }