例項:
首先新建一個公用寫元件的檔案下建立新的vue元件Sroller為例
Scroller.vue
佈局區域
<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區域
<script type="text/ecmascript-6">
export default {
name:'Scroller',
props: ['lists'], // 父元件傳入資料, 陣列形式 [ "連雨不知春去","一晴方覺夏深"]
data () {
return {
text: '' // 陣列文字轉化後的字串
}
},
methods: {
move () {
// 獲取文字text 的計算後寬度 (由於overflow的存在,直接獲取不到,需要獨立的node計算)
let width = document.getElementById('node').getBoundingClientRect().width
let box = document.getElementById('box')
let copy = document.getElementById('copy')
copy.innerText = this.text // 文字副本填充
let distance = 10 // 位移距離
// 設定位移
setInterval(function () {
distance = distance - 1
// 如果位移超過文字寬度,則回到起點
if (-distance >= width) {
distance = 16
}
box.style.transform = 'translateX(' + distance + 'px)'
}, 40)
}
},
// 把父元件傳入的arr轉化成字串
mounted: function () {
for (let i = 0; i < this.lists.length; i++) {
this.text += ' ' + this.lists[i]
}
},
// 更新的時候運動
updated: function () {
this.move()
}
}
</script>
樣式區域
<style scoped>
/*樣式的話可以寫*/
.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>
在需要的頁面中呼叫Scroller.vue檔案,如:
Demo.vue
佈局區域
<template>
<div class="aa">
<Scroller :lists="lists" class="scrollContainer left" />
</div>
</template>
js區域
<script type="text/ecmascript-6">
export default {
components: {Scroller},
props: ['lists'], // 父元件傳入資料, 陣列形式 [ "aaaa","bbbbb"]
data () {
return {
lists:['歡迎大家來一起學習'],
}
}
}
</script>
樣式區域
<style scoped>
/*樣式的話可以寫*/
.scrollContainer {
color: #ffffff;
font-size: 16px;
margin-left: 10px;
width:79%;
height: 30px;
line-height: 30px;
overflow: hidden;
}
</style>
——————我是晨曦,歡迎大家多多提出意見一起共同進步