/*! For license information please see 2641.6c8c9e06.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["2641"],{60261:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Sticky \u7C98\u6027\u5E03\u5C40

\n

\u4ECB\u7ECD

\n

Sticky \u7EC4\u4EF6\u4E0E CSS \u4E2D position: sticky \u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u4E00\u81F4\uFF0C\u5F53\u7EC4\u4EF6\u5728\u5C4F\u5E55\u8303\u56F4\u5185\u65F6\uFF0C\u4F1A\u6309\u7167\u6B63\u5E38\u7684\u5E03\u5C40\u6392\u5217\uFF0C\u5F53\u7EC4\u4EF6\u6EDA\u51FA\u5C4F\u5E55\u8303\u56F4\u65F6\uFF0C\u59CB\u7EC8\u4F1A\u56FA\u5B9A\u5728\u5C4F\u5E55\u9876\u90E8\u3002

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

\n
import { createApp } from 'vue';\nimport { Sticky } from 'vant';\n\nconst app = createApp();\napp.use(Sticky);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\u5C06\u5185\u5BB9\u5305\u88F9\u5728 Sticky \u7EC4\u4EF6\u5185\u5373\u53EF\u3002

\n
<van-sticky>\n  <van-button type="primary">\u57FA\u7840\u7528\u6CD5</van-button>\n</van-sticky>\n
\n

\u5438\u9876\u8DDD\u79BB

\n

\u901A\u8FC7 offset-top \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\u3002

\n
<van-sticky :offset-top="50">\n  <van-button type="primary">\u5438\u9876\u8DDD\u79BB</van-button>\n</van-sticky>\n
\n

\u6307\u5B9A\u5BB9\u5668

\n

\u901A\u8FC7 container \u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u7EC4\u4EF6\u7684\u5BB9\u5668\uFF0C\u9875\u9762\u6EDA\u52A8\u65F6\uFF0C\u7EC4\u4EF6\u4F1A\u59CB\u7EC8\u4FDD\u6301\u5728\u5BB9\u5668\u8303\u56F4\u5185\uFF0C\u5F53\u7EC4\u4EF6\u5373\u5C06\u8D85\u51FA\u5BB9\u5668\u5E95\u90E8\u65F6\uFF0C\u4F1A\u56FA\u5B9A\u5728\u5BB9\u5668\u7684\u5E95\u90E8\u3002

\n
<div ref="container" style="height: 150px;">\n  <van-sticky :container="container">\n    <van-button type="warning">\u6307\u5B9A\u5BB9\u5668</van-button>\n  </van-sticky>\n</div>\n
\n
export default {\n  setup() {\n    const container = ref(null);\n    return { container };\n  },\n};\n
\n

\u5438\u5E95\u8DDD\u79BB

\n

\u5C06 position \u8BBE\u7F6E\u4E3A bottom \u53EF\u4EE5\u8BA9\u7EC4\u4EF6\u5438\u9644\u5728\u5E95\u90E8\u3002\u901A\u8FC7 offset-bottom \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u5E95\u65F6\u4E0E\u5E95\u90E8\u7684\u8DDD\u79BB\u3002

\n
<van-sticky :offset-bottom="50" position="bottom">\n  <van-button type="primary">\u5438\u5E95\u8DDD\u79BB</van-button>\n</van-sticky>\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
position\u5438\u9644\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A bottomstringtop
offset-top\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 pxnumber | string0
offset-bottom\u5438\u5E95\u65F6\u4E0E\u5E95\u90E8\u7684\u8DDD\u79BB\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 pxnumber | string0
z-index\u5438\u9876\u65F6\u7684 z-indexnumber | string99
container\u5BB9\u5668\u5BF9\u5E94\u7684 HTML \u8282\u70B9Element-
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
change\u5F53\u5438\u9876\u72B6\u6001\u6539\u53D8\u65F6\u89E6\u53D1isFixed: boolean
scroll\u6EDA\u52A8\u65F6\u89E6\u53D1{ scrollTop: number, isFixed: boolean }
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

\n
import type { StickyProps, StickyPosition } from 'vant';\n
\n

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-sticky-z-index99-
\n
'},null,8,l))}}}]);