index.js 2.7 KB

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