vue做多行滚动广告牌

利用vue可以很方便的做滚动广告屏，结合前端和vue，废话不多说，直接上代码

1、前端

<div class="notice">

<div class="noticeTitle">

<span>公&nbsp;&nbsp;告</span>

</div>

<div class="textBox">

<div class="message">

<a href="#">

{{textArr[0].tag}}：{{textArr[0].title}}

</a>

</div>

<div class="message">

<a href="#">

{{textArr[1].tag}}：{{textArr[1].title}}

</a>

</div>

<div class="message">

<a href="#">

{{textArr[2].tag}}：{{textArr[2].title}}

</a>

</div>

<div class="message">

<a href="#">

{{textArr[3].tag}}：{{textArr[3].title}}

</a>

</div>

</div>

</div>

 

2、vue部分

<script>

export default {

data() {

return {

animate: false,

textArr: [

{tag: '精彩推荐', title: '11111111111111'},

{tag: '公司公告', title: '22222222222222222222'},

{tag: '公司公告', title: '2333333333333333'},

{tag: '公司公告', title: '4444444444'},

{tag: '公司公告', title: '5555555555555555555'},

{tag: '公司公告', title: '666666666666666666'},

{tag: '公司公告', title: '6777777777777777777777'},

{tag: '公司公告', title: '8888888888888888888888888888'},

{tag: '公司公告', title: '9999999999999999999999999999999999'},

],

};

},

// created () {

// setInterval (this.scroll, 1000)

// },

methods: {

switchFarm() {

this.$u.navigate('/switchFarm/')

},

scroll () {

this.animate = true;

setTimeout(() =>{

this.textArr.push(this.textArr[0])

this.textArr.shift()

this.animate=false

}, 500)

}

},

mounted () {

setInterval (this.scroll, 3000)

},

beforeDestroy () {}

};

</script>

 

3、 css部分

.notice {

width: 94%;

height: 35%;

margin: 20px auto;

// border: 2px solid #888888;

border-radius: 5px;

 

.noticeTitle {

font-size: 25px;

text-align: center;

margin: 5px auto;

color: red;

font-weight: bolder;

}

.textBox {

font-size: 16px;

 

.message {

width: 90%;

margin: 5px auto;

height: 30px;

text-align: left;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

}