index.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import { VantComponent } from '../common/component';
  2. const FONT_COLOR = '#ed6a0c';
  3. const BG_COLOR = '#fffbe8';
  4. VantComponent({
  5. props: {
  6. text: {
  7. type: String,
  8. value: '',
  9. observer() {
  10. wx.nextTick(() => {
  11. this.init();
  12. });
  13. },
  14. },
  15. mode: {
  16. type: String,
  17. value: '',
  18. },
  19. url: {
  20. type: String,
  21. value: '',
  22. },
  23. openType: {
  24. type: String,
  25. value: 'navigate',
  26. },
  27. delay: {
  28. type: Number,
  29. value: 1,
  30. },
  31. speed: {
  32. type: Number,
  33. value: 50,
  34. observer() {
  35. wx.nextTick(() => {
  36. this.init();
  37. });
  38. },
  39. },
  40. scrollable: {
  41. type: Boolean,
  42. value: true,
  43. },
  44. leftIcon: {
  45. type: String,
  46. value: '',
  47. },
  48. color: {
  49. type: String,
  50. value: FONT_COLOR,
  51. },
  52. backgroundColor: {
  53. type: String,
  54. value: BG_COLOR,
  55. },
  56. wrapable: Boolean,
  57. },
  58. data: {
  59. show: true,
  60. },
  61. created() {
  62. this.resetAnimation = wx.createAnimation({
  63. duration: 0,
  64. timingFunction: 'linear',
  65. });
  66. },
  67. destroyed() {
  68. this.timer && clearTimeout(this.timer);
  69. },
  70. methods: {
  71. init() {
  72. Promise.all([
  73. this.getRect('.van-notice-bar__content'),
  74. this.getRect('.van-notice-bar__wrap'),
  75. ]).then((rects) => {
  76. const [contentRect, wrapRect] = rects;
  77. if (
  78. contentRect == null ||
  79. wrapRect == null ||
  80. !contentRect.width ||
  81. !wrapRect.width
  82. ) {
  83. return;
  84. }
  85. const { speed, scrollable, delay } = this.data;
  86. if (scrollable && wrapRect.width < contentRect.width) {
  87. const duration = (contentRect.width / speed) * 1000;
  88. this.wrapWidth = wrapRect.width;
  89. this.contentWidth = contentRect.width;
  90. this.duration = duration;
  91. this.animation = wx.createAnimation({
  92. duration,
  93. timingFunction: 'linear',
  94. delay,
  95. });
  96. this.scroll();
  97. }
  98. });
  99. },
  100. scroll() {
  101. this.timer && clearTimeout(this.timer);
  102. this.timer = null;
  103. this.setData({
  104. animationData: this.resetAnimation
  105. .translateX(this.wrapWidth)
  106. .step()
  107. .export(),
  108. });
  109. setTimeout(() => {
  110. this.setData({
  111. animationData: this.animation
  112. .translateX(-this.contentWidth)
  113. .step()
  114. .export(),
  115. });
  116. }, 20);
  117. this.timer = setTimeout(() => {
  118. this.scroll();
  119. }, this.duration);
  120. },
  121. onClickIcon() {
  122. this.timer && clearTimeout(this.timer);
  123. this.timer = null;
  124. this.setData({ show: false });
  125. },
  126. onClick(event) {
  127. this.$emit('click', event);
  128. },
  129. },
  130. });