index.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <uni-shadow-root class="weapp-lib-sticky-index"><view class="custom-class van-sticky" :style="computed.containerStyle({ fixed, height, zIndex })">
  3. <view :class="utils.bem('sticky-wrap', { fixed })" :style="computed.wrapStyle({ fixed, offsetTop, transform, zIndex })">
  4. <slot></slot>
  5. </view>
  6. </view></uni-shadow-root>
  7. </template>
  8. <wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./index.wxs" module="computed"></wxs>
  9. <script>
  10. global['__wxRoute'] = 'weapp/lib/sticky/index'
  11. "use strict";
  12. Object.defineProperty(exports, "__esModule", { value: true });
  13. var utils_1 = require("../common/utils");
  14. var component_1 = require("../common/component");
  15. var validator_1 = require("../common/validator");
  16. var page_scroll_1 = require("../mixins/page-scroll");
  17. var ROOT_ELEMENT = '.van-sticky';
  18. (0, component_1.VantComponent)({
  19. props: {
  20. zIndex: {
  21. type: Number,
  22. value: 99,
  23. },
  24. offsetTop: {
  25. type: Number,
  26. value: 0,
  27. observer: 'onScroll',
  28. },
  29. disabled: {
  30. type: Boolean,
  31. observer: 'onScroll',
  32. },
  33. container: {
  34. type: null,
  35. observer: 'onScroll',
  36. },
  37. scrollTop: {
  38. type: null,
  39. observer: function (val) {
  40. this.onScroll({ scrollTop: val });
  41. },
  42. },
  43. },
  44. mixins: [
  45. (0, page_scroll_1.pageScrollMixin)(function (event) {
  46. if (this.data.scrollTop != null) {
  47. return;
  48. }
  49. this.onScroll(event);
  50. }),
  51. ],
  52. data: {
  53. height: 0,
  54. fixed: false,
  55. transform: 0,
  56. },
  57. mounted: function () {
  58. this.onScroll();
  59. },
  60. methods: {
  61. onScroll: function (_a) {
  62. var _this = this;
  63. var _b = _a === void 0 ? {} : _a, scrollTop = _b.scrollTop;
  64. var _c = this.data, container = _c.container, offsetTop = _c.offsetTop, disabled = _c.disabled;
  65. if (disabled) {
  66. this.setDataAfterDiff({
  67. fixed: false,
  68. transform: 0,
  69. });
  70. return;
  71. }
  72. this.scrollTop = scrollTop || this.scrollTop;
  73. if (typeof container === 'function') {
  74. Promise.all([
  75. (0, utils_1.getRect)(this, ROOT_ELEMENT),
  76. this.getContainerRect(),
  77. ]).then(function (_a) {
  78. var root = _a[0], container = _a[1];
  79. if (offsetTop + root.height > container.height + container.top) {
  80. _this.setDataAfterDiff({
  81. fixed: false,
  82. transform: container.height - root.height,
  83. });
  84. }
  85. else if (offsetTop >= root.top) {
  86. _this.setDataAfterDiff({
  87. fixed: true,
  88. height: root.height,
  89. transform: 0,
  90. });
  91. }
  92. else {
  93. _this.setDataAfterDiff({ fixed: false, transform: 0 });
  94. }
  95. });
  96. return;
  97. }
  98. (0, utils_1.getRect)(this, ROOT_ELEMENT).then(function (root) {
  99. if (!(0, validator_1.isDef)(root)) {
  100. return;
  101. }
  102. if (offsetTop >= root.top) {
  103. _this.setDataAfterDiff({ fixed: true, height: root.height });
  104. _this.transform = 0;
  105. }
  106. else {
  107. _this.setDataAfterDiff({ fixed: false });
  108. }
  109. });
  110. },
  111. setDataAfterDiff: function (data) {
  112. var _this = this;
  113. wx.nextTick(function () {
  114. var diff = Object.keys(data).reduce(function (prev, key) {
  115. if (data[key] !== _this.data[key]) {
  116. prev[key] = data[key];
  117. }
  118. return prev;
  119. }, {});
  120. if (Object.keys(diff).length > 0) {
  121. _this.setData(diff);
  122. }
  123. _this.$emit('scroll', {
  124. scrollTop: _this.scrollTop,
  125. isFixed: data.fixed || _this.data.fixed,
  126. });
  127. });
  128. },
  129. getContainerRect: function () {
  130. var nodesRef = this.data.container();
  131. return new Promise(function (resolve) { return nodesRef.boundingClientRect(resolve).exec(); });
  132. },
  133. },
  134. });
  135. export default global['__wxComponents']['weapp/lib/sticky/index']
  136. </script>
  137. <style platform="mp-weixin">
  138. @import '../common/index.css';.van-sticky{position:relative}.van-sticky-wrap--fixed{left:0;position:fixed;right:0}
  139. </style>