<!-- 文字跑马灯 --> <template> <div class="wrap"> <div ref="box" class="box"> {{text}} </div> </div> </template> <script> export default { data () { return { timer: null, text: '文本滚动', } }, methods: { startText () { if(this.timer != null) return; let width = this.getLenPx(this.text, 26) let distance = 400; // 设为0从左侧开始播放 this.timer = setInterval(() => { distance = distance - 1; // 如果位移超过文字宽度,则回到起点 if (-distance >= width) { distance = 400 } this.$refs.box.style.transform = 'translateX(' + distance + 'px)'; }, 10) }, stopText () { //清除定时器 clearInterval(this.timer) //清除定时器之后,需要重新将定时器置为null this.timer = null }, // 获取字符串占位px getLenPx(str, font_size) { var str_leng = str.replace(/[^\x00-\xff]/gi, 'aa').length; return str_leng * font_size / 2 } }, mounted () { this.startText() }, destroyed () { this.stopText() } } </script> <style lang='scss' scoped> .wrap { width: 400px; overflow: hidden; } .box { width: 8000%; overflow: hidden; } </style>
网上有好多例子,总觉得不太好,自己改了改,还算满意,不足之处欢迎各位指出。(为了方便大家做了稍微改动)
下面是我没改动代码
<!-- 文字跑马灯 --> <template> <div class="wrap"> <div ref="box" class="box"> {{element.propValue[0]}} </div> </div> </template> <script> export default { data () { return { timer: null } }, props: { element: { type: Object, }, }, methods: { startText () { if(this.timer != null) return; let width = this.getLenPx(this.element.propValue[0], this.element.style.fontSize) let distance = this.element.style.width; // 设为0从左侧开始播放 this.timer = setInterval(() => { distance = distance - 1; // 如果位移超过文字宽度,则回到起点 if (-distance >= width) { distance = this.element.style.width } this.$refs.box.style.transform = 'translateX(' + distance + 'px)'; }, 10) }, stopText () { //清除定时器 clearInterval(this.timer) //清除定时器之后,需要重新将定时器置为null this.timer = null }, // 获取字符串占位px getLenPx(str, font_size) { var str_leng = str.replace(/[^\x00-\xff]/gi, 'aa').length; return str_leng * font_size / 2 } }, mounted () { this.startText() }, destroyed () { this.stopText() } } </script> <style lang='scss' scoped> .wrap { overflow: hidden; } .box { width: 8000%; overflow: hidden; } </style>