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