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

This article mainly explains "vue how to achieve horizontal seamless circular scrolling of announcement messages". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "vue how to achieve horizontal seamless circular scrolling of announcement messages".

Marqueex.vue

{{item.detail}} export default {name: 'my-marquee-left', props: {sendVal: {type:Array, default: []}}, data () {return {note: {backgroundImage: "url (" + require (".. / static/images/common/msg.png") + "), backgroundSize:" 20px 20px " BackgroundRepeat: "no-repeat", backgroundPosition: "1% 50%"}, / / timer identifies nowTime: null, / / width of each content disArr: []}, mounted () {/ / var that = this var item = this.$refs.list var len = this.sendVal.length var arr = [] / / because the set margin value is the same So just take the first one. Var margin = this.getMargin (item [0]) for (var I = 0; I

< len; i++) { arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离 } this.disArr = arr this.moveLeft() }, beforeDestroy () { // 页面关闭清除定时器 clearInterval(this.nowTime) // 清除定时器标识 this.nowTime = null }, methods: { // 获取margin属性 getMargin (obj) { var marg = window.getComputedStyle(obj, null)['margin-right'] marg = marg.replace('px', '') return Number(marg) // 强制转化成数字 }, // 移动的方法 moveLeft () { var that = this var outbox = this.$refs.box // 初始位置 var startDis = 0 // console.log('that.disArr: ', that.disArr) this.nowTime = setInterval(function () { startDis -= 0.5 // console.log('初始化移动：', startDis) if (Math.abs(startDis) >

Math.abs (that.disArr [0]) {/ / move the distance of one element at a time, that.disArr.push (that.disArr.shift ()) / / move the width of the element one element at a time Put the first item of the list data to the last item / / console.log ('that.sendVal:', that.sendVal) / / console.log ('that.sendVal:' That.sendVal.shift () that.sendVal.push (that.sendVal.shift ()) startDis = 0 / / console.log ('move')} else {/ / console.log ('if you don't come...')} / / Let the box move the specified distance each time. In the project I did myself, This method of string concatenation does not take effect / / outbox.style = 'transform: translateX3d (' + startDis +'px)'/ / then change the template string of es6 to outbox.style = `transform: translateX (${startDis} px) `/ / outbox.style = 'transform: translateX (\' + startDis +\'px)'/ / outbox.style.marginLeft = 'startDis' / / console.log ('here:' StartDis)}, 1000 / 60)}}. My-outbox {/ * color: # D7BC8D * / overflow: hidden; color: # FFFFFF; height: 35px; / * background: # 422b02 politics / .my-inbox {white-space: nowrap;. My-list {margin-right: 100px; display: inline-block; font-size: 14px; / / height: 20px; text-indent:30px; line-height: 40px; .my-uname {/ * color: # FF8900 * / color: # FFFFFF;}

Other modules are introduced according to their own directory.

Html part

Js part

Import marqueeLeft from ". / marqueeX" Export default {data () {return {newsList: [{name: "Zhang San1", detail: "Information Bulletin: 14 October 2020 limited to the establishment of the company The amount of our bank's letter is 111111 yuan ",}, {name:" Zhang San2 ", detail:" Information Bulletin: on September 30, 2020, our bank's letter amount is 222222 yuan ", {name:" Zhang San3 ", detail:" Information Bulletin: the Co., Ltd. was established in December 2020. " Our bank credit amount is 333333 yuan,}, {name: "Zhang San4", detail: "Information announcement: August 31 Co., Ltd., 2020, our bank credit amount is 444444 yuan",},],} }, components: {marqueeLeft,}

Css part

.messageBox {width: 60%; overflow: hidden;} Thank you for reading. The above is the content of "how vue implements horizontal seamless circular scrolling of announcement messages". After the study of this article, I believe you have a deeper understanding of how vue implements horizontal seamless circular scrolling of announcement messages, and the specific usage needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.