Vant4 BackTop 回到頂部

介紹

返回頁面頂部的操作按鈕。

引入

通過以下方式來全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

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

代碼演示

基礎(chǔ)用法

請(qǐng)滾動(dòng)示例頁面來查看右下角的返回頂部按鈕。

<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? 屬性來設(shè)置組件距離右側(cè)和底部的位置。

<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 };
  },
};

自定義內(nèi)容

使用默認(rèn)插槽來自定義組件展示的內(nèi)容。

<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 };
  },
};

設(shè)置滾動(dòng)目標(biāo)

可以通過 ?target? 屬性來設(shè)置觸發(fā)滾動(dòng)的目標(biāo)對(duì)象，支持傳入選擇器或 ?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

類型定義

組件導(dǎo)出以下類型定義：

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

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。