Shulou(Shulou.com)06/01 Report--

The main content of this article is to explain "how to achieve unlimited message scrolling seamlessly in vue". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve unlimited message scrolling seamlessly with vue".

1. Html

Alarm time belongs to the concentrator content {{item.wtime}} {{item.terminalName}} {{item.remark}}

II. Style

.table _ box {padding:10px;}. Table_title_item {width:30%; height:28px; color:#fff; color:#01C0C3; font-size: 14px; line-height: 28px; text-align: center;}. Table_content {margin:5px; height:28vh; overflow: hidden;} .table_item {width:100%; / / set row height height:30px; line-height: 30px Display: flex; color:#01C0C3; font-size:14px;} .anim {/ / set scroll transition: all 0.5s; margin-top:-30pxbank / height equals row height}. Table_colum {width:30%; text-align: center; / / omit overflow: hidden; text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 1 / / webkit-box-orient: vertical;}. Table_colum2 {width:40%; text-align: center; / / omit overflow: hidden; text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 1; / / number of lines-webkit-box-orient: vertical;}

III. Js

Export default {data () {return {/ / alarm scrolling part chart4: [], animate: false, intNum: undefined}}, created () {this.getAlarmDatas ()} Methods: {/ / get alarm data getAlarmDatas () {getAlarmInfo () .then (res = > {if (res.code = 1 & & res.data.length > 0) {this.chart4 = res.data this.ScrollUp ()})} / * * alarm scrolling section * / ScrollUp () {/ / clear the last timer this.Stop () let that = this this.intNum = setInterval (function () {that.animate = true / / need to add css3 transition animation when scrolling up each time SetTimeout (() = > {that.chart4.push (that.chart4 [0]) / / add the first element of the array to the that.chart4.shift () / delete the first element of the array that.animate = false} 2000)}, / / move the mouse up to stop Stop () {clearInterval (this.intNum)}, / / move the mouse out of Up () {this.ScrollUp ()}

IV. Effect

At this point, I believe you have a deeper understanding of "how to achieve unlimited message scrolling in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.