diff --git a/example/pages/sticky/index.wxml b/example/pages/sticky/index.wxml index 747f3406..e00da7a9 100644 --- a/example/pages/sticky/index.wxml +++ b/example/pages/sticky/index.wxml @@ -7,7 +7,7 @@ - + 吸顶距离 diff --git a/packages/sticky/README.md b/packages/sticky/README.md index b33d17e6..1360afee 100644 --- a/packages/sticky/README.md +++ b/packages/sticky/README.md @@ -1,6 +1,11 @@ # Sticky 粘性布局 +### 介绍 + +Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致,当组件在屏幕范围内时,会按照正常的布局排列,当组件滚出屏幕范围时,始终会固定在屏幕顶部。 + ### 引入 + 在`app.json`或`index.json`中引入组件,默认为`ES6`版本,`ES5`引入方式参见[快速上手](#/quickstart) ```json @@ -27,7 +32,7 @@ 通过`offset-top`属性可以设置组件在吸顶时与顶部的距离 ```html - + 吸顶距离 ``` diff --git a/packages/sticky/index.ts b/packages/sticky/index.ts index 058a3710..ce69952e 100644 --- a/packages/sticky/index.ts +++ b/packages/sticky/index.ts @@ -7,7 +7,7 @@ VantComponent({ props: { zIndex: { type: Number, - value: 1 + value: 99 }, offsetTop: { type: Number, @@ -24,10 +24,7 @@ VantComponent({ methods: { setWrapStyle() { - const { offsetTop, position } = this.data as { - offsetTop: number - position: Position - }; + const { offsetTop, position } = this.data; let wrapStyle: string; let containerStyle: string; @@ -51,11 +48,19 @@ VantComponent({ containerStyle = ''; } - // cut down `set`x - let data: any = {}; - if (wrapStyle !== this.data.wrapStyle) data.wrapStyle = wrapStyle; - if (containerStyle !== this.data.containerStyle) data.containerStyle = containerStyle; - if (JSON.stringify(data) !== '{}') this.set(data); + const data: Record = {}; + + if (wrapStyle !== this.data.wrapStyle) { + data.wrapStyle = wrapStyle; + } + + if (containerStyle !== this.data.containerStyle) { + data.containerStyle = containerStyle; + } + + if (JSON.stringify(data) !== '{}') { + this.set(data); + } }, setPosition(position: Position) { @@ -75,43 +80,49 @@ VantComponent({ // @ts-ignore this.createIntersectionObserver() - .relativeToViewport({ top: - (this.itemHeight + offsetTop) }) - .observe('.van-sticky', (res: WechatMiniprogram.ObserveCallbackResult) => { - const { top } = res.boundingClientRect; + .relativeToViewport({ top: -(this.itemHeight + offsetTop) }) + .observe( + '.van-sticky', + (res: WechatMiniprogram.ObserveCallbackResult) => { + const { top } = res.boundingClientRect; - if (top > offsetTop) { - return; + if (top > offsetTop) { + return; + } + + const position: Position = 'top'; + + this.$emit('scroll', { + scrollTop: top + offsetTop, + isFixed: true + }); + + this.setPosition(position); } - - const position: Position = 'top'; - - this.$emit('scroll', { - scrollTop: top + offsetTop, - isFixed: true - }); - - this.setPosition(position); - }); + ); // @ts-ignore this.createIntersectionObserver() .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) }) - .observe('.van-sticky', (res: WechatMiniprogram.ObserveCallbackResult) => { - const { top, bottom } = res.boundingClientRect; + .observe( + '.van-sticky', + (res: WechatMiniprogram.ObserveCallbackResult) => { + const { top, bottom } = res.boundingClientRect; - if (bottom <= this.itemHeight - 1) { - return; + if (bottom <= this.itemHeight - 1) { + return; + } + + const position: Position = res.intersectionRatio > 0 ? 'top' : ''; + + this.$emit('scroll', { + scrollTop: top + offsetTop, + isFixed: position === 'top' + }); + + this.setPosition(position); } - - const position: Position = res.intersectionRatio > 0 ? 'top' : ''; - - this.$emit('scroll', { - scrollTop: top + offsetTop, - isFixed: position === 'top' - }); - - this.setPosition(position); - }); + ); } },