blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

fix(Sticky): default z-index (#1975)

Browse Source
This commit is contained in:
neverland 2019-09-06 14:28:45 +08:00 committed by GitHub
parent 623bea55fd
commit a37e0b9fa5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/pages/sticky/index.wxml
View File

@ -7,7 +7,7 @@
</demo-block> </demo-block>
<demo-block title="吸顶距离"> <demo-block title="吸顶距离">
<van-sticky offset-top="{{30}}"> <van-sticky offset-top="{{ 50 }}">
<van-button type="info" style="margin-left: 115px"> <van-button type="info" style="margin-left: 115px">
吸顶距离 吸顶距离
</van-button> </van-button>

7
packages/sticky/README.md
View File

@ -1,6 +1,11 @@
# Sticky 粘性布局 # Sticky 粘性布局
### 介绍
Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。
### 引入 ### 引入
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart) 在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
```json ```json
@ -27,7 +32,7 @@
通过`offset-top`属性可以设置组件在吸顶时与顶部的距离 通过`offset-top`属性可以设置组件在吸顶时与顶部的距离
```html ```html
<van-sticky offset-top="{{ 30 }}"> <van-sticky offset-top="{{ 50 }}">
<van-button type="info">吸顶距离</van-button> <van-button type="info">吸顶距离</van-button>
</van-sticky> </van-sticky>
``` ```

89
packages/sticky/index.ts
View File

@ -7,7 +7,7 @@ VantComponent({
props: { props: {
zIndex: { zIndex: {
type: Number, type: Number,
value: 1 value: 99
}, },
offsetTop: { offsetTop: {
type: Number, type: Number,
@ -24,10 +24,7 @@ VantComponent({
methods: { methods: {
setWrapStyle() { setWrapStyle() {
const { offsetTop, position } = this.data as { const { offsetTop, position } = this.data;
offsetTop: number
position: Position
};
let wrapStyle: string; let wrapStyle: string;
let containerStyle: string; let containerStyle: string;
@ -51,11 +48,19 @@ VantComponent({
containerStyle = ''; containerStyle = '';
} }
// cut down `set`x const data: Record<string, string> = {};
let data: any = {};
if (wrapStyle !== this.data.wrapStyle) data.wrapStyle = wrapStyle; if (wrapStyle !== this.data.wrapStyle) {
if (containerStyle !== this.data.containerStyle) data.containerStyle = containerStyle; data.wrapStyle = wrapStyle;
if (JSON.stringify(data) !== '{}') this.set(data); }
if (containerStyle !== this.data.containerStyle) {
data.containerStyle = containerStyle;
}
if (JSON.stringify(data) !== '{}') {
this.set(data);
}
}, },
setPosition(position: Position) { setPosition(position: Position) {
@ -75,43 +80,49 @@ VantComponent({
// @ts-ignore // @ts-ignore
this.createIntersectionObserver() this.createIntersectionObserver()
.relativeToViewport({ top: - (this.itemHeight + offsetTop) }) .relativeToViewport({ top: -(this.itemHeight + offsetTop) })
.observe('.van-sticky', (res: WechatMiniprogram.ObserveCallbackResult) => { .observe(
const { top } = res.boundingClientRect; '.van-sticky',
(res: WechatMiniprogram.ObserveCallbackResult) => {
const { top } = res.boundingClientRect;
if (top > offsetTop) { if (top > offsetTop) {
return; 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 // @ts-ignore
this.createIntersectionObserver() this.createIntersectionObserver()
.relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) }) .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) })
.observe('.van-sticky', (res: WechatMiniprogram.ObserveCallbackResult) => { .observe(
const { top, bottom } = res.boundingClientRect; '.van-sticky',
(res: WechatMiniprogram.ObserveCallbackResult) => {
const { top, bottom } = res.boundingClientRect;
if (bottom <= this.itemHeight - 1) { if (bottom <= this.itemHeight - 1) {
return; 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);
});
} }
}, },