index.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/libs/classNames'
  3. import { useRect } from '../helpers/hooks/useDOM'
  4. baseComponent({
  5. relations: {
  6. '../sticky/index': {
  7. type: 'parent',
  8. },
  9. },
  10. properties: {
  11. prefixCls: {
  12. type: String,
  13. value: 'wux-sticky-item',
  14. },
  15. title: {
  16. type: String,
  17. value: '',
  18. },
  19. content: {
  20. type: String,
  21. value: '',
  22. },
  23. },
  24. data: {
  25. isFixed: false,
  26. index: 0,
  27. top: 0,
  28. height: 0,
  29. },
  30. computed: {
  31. classes: ['prefixCls, isFixed', function(prefixCls, isFixed) {
  32. const wrap = classNames(prefixCls, {
  33. [`${prefixCls}--fixed`]: isFixed,
  34. })
  35. const hd = `${prefixCls}__hd`
  36. const title = `${prefixCls}__title`
  37. const bd = `${prefixCls}__bd`
  38. const content = `${prefixCls}__content`
  39. return {
  40. wrap,
  41. hd,
  42. title,
  43. bd,
  44. content,
  45. }
  46. }],
  47. },
  48. methods: {
  49. onScroll(scrollTop) {
  50. const parent = this.getRelationsByName('../sticky/index')[0]
  51. const { top, height, index } = this.data
  52. const isFixed = scrollTop >= top && scrollTop < top + height
  53. if (this.data.isFixed !== isFixed) {
  54. this.setData({
  55. isFixed,
  56. })
  57. if (parent) {
  58. parent.triggerEvent(isFixed ? 'stick' : 'unstick', { index })
  59. }
  60. }
  61. },
  62. updated(index) {
  63. useRect(`.${this.data.prefixCls}`, this)
  64. .then((rect) => {
  65. if (!rect) return
  66. this.setData({
  67. top: rect.top,
  68. height: rect.height,
  69. index,
  70. })
  71. })
  72. },
  73. },
  74. })