選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

u-sticky.vue 4.0 KiB

3年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <view class="">
  3. <view class="u-sticky-wrap" :class="[elClass]" :style="{
  4. height: fixed ? height + 'px' : 'auto',
  5. backgroundColor: bgColor
  6. }">
  7. <view class="u-sticky" :style="{
  8. position: fixed ? 'fixed' : 'static',
  9. top: stickyTop + 'px',
  10. left: left + 'px',
  11. width: width == 'auto' ? 'auto' : width + 'px',
  12. zIndex: uZIndex
  13. }">
  14. <slot></slot>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. /**
  21. * sticky 吸顶
  22. * @description 该组件与CSS中position: sticky属性实现的效果一致,当组件达到预设的到顶部距离时, 就会固定在指定位置,组件位置大于预设的顶部距离时,会重新按照正常的布局排列。
  23. * @tutorial https://www.uviewui.com/components/sticky.html
  24. * @property {String Number} offset-top 吸顶时与顶部的距离,单位rpx(默认0)
  25. * @property {String Number} index 自定义标识,用于区分是哪一个组件
  26. * @property {Boolean} enable 是否开启吸顶功能(默认true)
  27. * @property {String} bg-color 组件背景颜色(默认#ffffff)
  28. * @property {String Number} z-index 吸顶时的z-index值(默认970)
  29. * @property {String Number} h5-nav-height 导航栏高度,自定义导航栏时(无导航栏时需设置为0),需要传入此值,单位px(默认44)
  30. * @event {Function} fixed 组件吸顶时触发
  31. * @example <u-sticky offset-top="200"><view>塞下秋来风景异,衡阳雁去无留意</view></u-sticky>
  32. */
  33. export default {
  34. name: "u-sticky",
  35. props: {
  36. // 吸顶容器到顶部某个距离的时候,进行吸顶,在H5平台,NavigationBar为44px
  37. offsetTop: {
  38. type: [Number, String],
  39. default: 0
  40. },
  41. //列表中的索引值
  42. index: {
  43. type: [Number, String],
  44. default: ''
  45. },
  46. // 是否开启吸顶功能
  47. enable: {
  48. type: Boolean,
  49. default: true
  50. },
  51. // h5顶部导航栏的高度
  52. h5NavHeight: {
  53. type: [Number, String],
  54. default: 44
  55. },
  56. // 吸顶区域的背景颜色
  57. bgColor: {
  58. type: String,
  59. default: '#ffffff'
  60. },
  61. // z-index值
  62. zIndex: {
  63. type: [Number, String],
  64. default: ''
  65. }
  66. },
  67. data() {
  68. return {
  69. fixed: false,
  70. height: 'auto',
  71. stickyTop: 0,
  72. elClass: this.$u.guid(),
  73. left: 0,
  74. width: 'auto',
  75. };
  76. },
  77. watch: {
  78. offsetTop(val) {
  79. this.initObserver();
  80. },
  81. enable(val) {
  82. if (val == false) {
  83. this.fixed = false;
  84. this.disconnectObserver('contentObserver');
  85. } else {
  86. this.initObserver();
  87. }
  88. }
  89. },
  90. computed: {
  91. uZIndex() {
  92. return this.zIndex ? this.zIndex : this.$u.zIndex.sticky;
  93. }
  94. },
  95. mounted() {
  96. this.initObserver();
  97. },
  98. methods: {
  99. initObserver() {
  100. if (!this.enable) return;
  101. // #ifdef H5
  102. this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.h5NavHeight : this.h5NavHeight;
  103. // #endif
  104. // #ifndef H5
  105. this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) : 0;
  106. // #endif
  107. this.disconnectObserver('contentObserver');
  108. this.$uGetRect('.' + this.elClass).then((res) => {
  109. this.height = res.height;
  110. this.left = res.left;
  111. this.width = res.width;
  112. this.$nextTick(() => {
  113. this.observeContent();
  114. });
  115. });
  116. },
  117. observeContent() {
  118. this.disconnectObserver('contentObserver');
  119. const contentObserver = this.createIntersectionObserver({
  120. thresholds: [0.95, 0.98, 1]
  121. });
  122. contentObserver.relativeToViewport({
  123. top: -this.stickyTop
  124. });
  125. contentObserver.observe('.' + this.elClass, res => {
  126. if (!this.enable) return;
  127. this.setFixed(res.boundingClientRect.top);
  128. });
  129. this.contentObserver = contentObserver;
  130. },
  131. setFixed(top) {
  132. const fixed = top < this.stickyTop;
  133. this.fixed = fixed;
  134. if (fixed) this.$emit('fixed', this.index);
  135. },
  136. disconnectObserver(observerName) {
  137. const observer = this[observerName];
  138. observer && observer.disconnect();
  139. },
  140. }
  141. };
  142. </script>
  143. <style scoped lang="scss">
  144. @import "../../libs/css/style.components.scss";
  145. .u-sticky {
  146. z-index: 9999999999;
  147. }
  148. </style>