index.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. baseComponent({
  4. relations: {
  5. '../sticky/index': {
  6. type: 'parent',
  7. },
  8. },
  9. properties: {
  10. prefixCls: {
  11. type: String,
  12. value: 'wux-sticky-item',
  13. },
  14. title: {
  15. type: String,
  16. value: '',
  17. },
  18. content: {
  19. type: String,
  20. value: '',
  21. },
  22. },
  23. data: {
  24. isFixed: false,
  25. index: 0,
  26. top: 0,
  27. height: 0,
  28. },
  29. computed: {
  30. classes() {
  31. const { prefixCls, isFixed } = this.data
  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 { top, height } = this.data
  51. const isFixed = scrollTop >= top && scrollTop < top + height
  52. if (isFixed !== this.data.isFixed) {
  53. this.setData({
  54. isFixed,
  55. })
  56. }
  57. },
  58. updated(index) {
  59. const className = `.${this.data.prefixCls}`
  60. wx
  61. .createSelectorQuery()
  62. .in(this)
  63. .select(className)
  64. .boundingClientRect((rect) => {
  65. if (!rect) return
  66. this.setData({
  67. top: rect.top,
  68. height: rect.height,
  69. index,
  70. })
  71. })
  72. .exec()
  73. },
  74. },
  75. })