index.js 3.7 KB

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