1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
| import { getRect } from '../common/utils';
| import { VantComponent } from '../common/component';
| import { isDef } from '../common/validator';
| import { pageScrollMixin } from '../mixins/page-scroll';
| const ROOT_ELEMENT = '.van-sticky';
| VantComponent({
| props: {
| zIndex: {
| type: Number,
| value: 99,
| },
| offsetTop: {
| type: Number,
| value: 0,
| observer: 'onScroll',
| },
| disabled: {
| type: Boolean,
| observer: 'onScroll',
| },
| container: {
| type: null,
| observer: 'onScroll',
| },
| scrollTop: {
| type: null,
| observer(val) {
| this.onScroll({ scrollTop: val });
| },
| },
| },
| mixins: [
| pageScrollMixin(function (event) {
| if (this.data.scrollTop != null) {
| return;
| }
| this.onScroll(event);
| }),
| ],
| data: {
| height: 0,
| fixed: false,
| transform: 0,
| },
| mounted() {
| this.onScroll();
| },
| methods: {
| onScroll({ scrollTop } = {}) {
| const { container, offsetTop, disabled } = this.data;
| if (disabled) {
| this.setDataAfterDiff({
| fixed: false,
| transform: 0,
| });
| return;
| }
| this.scrollTop = scrollTop || this.scrollTop;
| if (typeof container === 'function') {
| Promise.all([
| getRect(this, ROOT_ELEMENT),
| this.getContainerRect(),
| ]).then(([root, container]) => {
| if (offsetTop + root.height > container.height + container.top) {
| this.setDataAfterDiff({
| fixed: false,
| transform: container.height - root.height,
| });
| }
| else if (offsetTop >= root.top) {
| this.setDataAfterDiff({
| fixed: true,
| height: root.height,
| transform: 0,
| });
| }
| else {
| this.setDataAfterDiff({ fixed: false, transform: 0 });
| }
| });
| return;
| }
| getRect(this, ROOT_ELEMENT).then((root) => {
| if (!isDef(root)) {
| return;
| }
| if (offsetTop >= root.top) {
| this.setDataAfterDiff({ fixed: true, height: root.height });
| this.transform = 0;
| }
| else {
| this.setDataAfterDiff({ fixed: false });
| }
| });
| },
| setDataAfterDiff(data) {
| wx.nextTick(() => {
| const diff = Object.keys(data).reduce((prev, key) => {
| if (data[key] !== this.data[key]) {
| prev[key] = data[key];
| }
| return prev;
| }, {});
| if (Object.keys(diff).length > 0) {
| this.setData(diff);
| }
| this.$emit('scroll', {
| scrollTop: this.scrollTop,
| isFixed: data.fixed || this.data.fixed,
| });
| });
| },
| getContainerRect() {
| const nodesRef = this.data.container();
| return new Promise((resolve) => nodesRef.boundingClientRect(resolve).exec());
| },
| },
| });
|
|
