實(shí)例：
首先新建一個(gè)公用寫(xiě)組件的文件下創(chuàng)建新的vue組件Sroller為例
Scroller.vue
布局區(qū)域
<template>
<div class="wrap">
<div id="box">
<div id="marquee">{{text}}</div>
<div id="copy" style="display: none;margin-top: -5px"></div>
</div>
<div id="node">{{text}}</div>
</div>
</template>
js區(qū)域
<script type="text/ecmascript-6">
export default {
name:'Scroller',
props: ['lists'], // 父組件傳入數(shù)據(jù)物臂， 數(shù)組形式 [ "連雨不知春去"券册，"一晴方覺(jué)夏深"]
data () {
return {
text: '' // 數(shù)組文字轉(zhuǎn)化后的字符串
}
},
methods: {
move () {
// 獲取文字text 的計(jì)算后寬度 （由于overflow的存在座慰，直接獲取不到逛尚，需要獨(dú)立的node計(jì)算）
let width = document.getElementById('node').getBoundingClientRect().width
let box = document.getElementById('box')
let copy = document.getElementById('copy')
copy.innerText = this.text // 文字副本填充
let distance = 10 // 位移距離
// 設(shè)置位移
setInterval(function () {
distance = distance - 1
// 如果位移超過(guò)文字寬度，則回到起點(diǎn)
if (-distance >= width) {
distance = 16
}
box.style.transform = 'translateX(' + distance + 'px)'
}, 40)
}
},
// 把父組件傳入的arr轉(zhuǎn)化成字符串
mounted: function () {
for (let i = 0; i < this.lists.length; i++) {
this.text += ' ' + this.lists[i]
}
},
// 更新的時(shí)候運(yùn)動(dòng)
updated: function () {
this.move()
}
}
</script>
樣式區(qū)域
<style scoped>
/*樣式的話(huà)可以寫(xiě)*/
.wrap {
overflow: hidden;
color: #005bbe;
}
#box {
/*width: 80%;*/
height: 100%;
}
#box div {
float: left;
}
#marquee {
margin: -5px 16px 0 20px;
}
#node {
position: absolute;
z-index: -99;
top: -99px;
}
</style>
- 以上就是可以實(shí)現(xiàn)滾動(dòng)的組件
在需要的頁(yè)面中調(diào)用Scroller.vue文件览濒，如：
Demo.vue
布局區(qū)域
<template>
<div class="aa">
<Scroller :lists="lists" class="scrollContainer left" />
</div>
</template>
js區(qū)域
<script type="text/ecmascript-6">
export default {
components: {Scroller},
props: ['lists'], // 父組件傳入數(shù)據(jù)辕漂， 數(shù)組形式 [ "aaaa"黍图，"bbbbb"]
data () {
return {
lists:['歡迎大家來(lái)一起學(xué)習(xí)'],
}
}
}
</script>
樣式區(qū)域
<style scoped>
/*樣式的話(huà)可以寫(xiě)*/
.scrollContainer {
color: #ffffff;
font-size: 16px;
margin-left: 10px;
width:79%;
height: 30px;
line-height: 30px;
overflow: hidden;
}
</style>
- 以上就是可以實(shí)現(xiàn)滾動(dòng)的功能
——————我是晨曦厨喂，歡迎大家多多提出意見(jiàn)一起共同進(jìn)步
