W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
Sticky 組件與 CSS 中 position: sticky 屬性實現(xiàn)的效果一致,當(dāng)組件在屏幕范圍內(nèi)時,會按照正常的布局排列,當(dāng)組件滾出屏幕范圍時,始終會固定在屏幕頂部。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { Sticky } from 'vant';
const app = createApp();
app.use(Sticky);
將內(nèi)容包裹在 Sticky 組件內(nèi)即可。
<van-sticky>
<van-button type="primary">基礎(chǔ)用法</van-button>
</van-sticky>
通過 offset-top 屬性可以設(shè)置組件在吸頂時與頂部的距離。
<van-sticky :offset-top="50">
<van-button type="primary">吸頂距離</van-button>
</van-sticky>
通過 container 屬性可以指定組件的容器,頁面滾動時,組件會始終保持在容器范圍內(nèi),當(dāng)組件即將超出容器底部時,會固定在容器的底部。
<div ref="container" style="height: 150px;">
<van-sticky :container="container">
<van-button type="warning">指定容器</van-button>
</van-sticky>
</div>
export default {
setup() {
const container = ref(null);
return { container };
},
};
將 position 設(shè)置為 bottom 可以讓組件吸附在底部。通過 offset-bottom 屬性可以設(shè)置組件在吸底時與底部的距離。
<van-sticky :offset-bottom="50" position="bottom">
<van-button type="primary">吸底距離</van-button>
</van-sticky>
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
position v3.0.6
|
吸附位置,可選值為 bottom
|
string | top
|
offset-top | 吸頂時與頂部的距離,支持 px vw vh rem 單位,默認(rèn) px
|
number | string | 0
|
offset-bottom v3.0.6
|
吸底時與底部的距離,支持 px vw vh rem 單位,默認(rèn) px
|
number | string | 0
|
z-index | 吸頂時的 z-index | number | string | 99
|
container | 容器對應(yīng)的 HTML 節(jié)點 | Element | - |
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
change v3.0.10
|
當(dāng)吸頂狀態(tài)改變時觸發(fā) | isFixed: boolean |
scroll | 滾動時觸發(fā) | { scrollTop: number, isFixed: boolean } |
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-sticky-z-index | 99 | - |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: