基礎(chǔ)要求
知道如何使用vue-cli
熟悉vue1.0、了解sass
準(zhǔn)備工作
使用vue-cli安裝vue1.0 webpack框架
安裝node-sass、sass-loader
插件編寫(xiě)
滾動(dòng)信息插件主要分為三部分，一是滾動(dòng)信息樣式，二是滾動(dòng)動(dòng)畫(huà)的實(shí)現(xiàn)，三是信息列表的處理
樣式編寫(xiě)
show-notice固定高度，并且設(shè)置overflow: hidden;只有notice-list與show-notice重疊的部分才會(huì)顯示出來(lái)。noticePosition設(shè)置notice-list位置，可以通過(guò)noticePosition控制顯示信息。
<template>
<div class="show-notice">
<div class="notice-list" :style="{transform: 'translateY(-'+noticePosition+'px) translateZ(0px)'}" v-el:roll>
<p v-for="notice in notices" track-by="$index">{{notice}}</p>
</div>
</div>
</template>
<style lang="scss" scoped>
$notice-height: 30px;
.show-notice{
height: $notice-height;
overflow: hidden;
vertical-align: middle;
.notice-list p{
margin: 0;
height: $notice-height;
line-height: $notice-height;
}
}
</style>
實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)
信息滾動(dòng)流程為：停止=>滾動(dòng)=>停止，當(dāng)滾動(dòng)到最后一條的信息時(shí)，又滾動(dòng)回第一條信息，循環(huán)往復(fù)。因?yàn)闈L動(dòng)動(dòng)畫(huà)的效果應(yīng)該是一致的，所以最后一條信息滾動(dòng)回第一條信息的效果也應(yīng)該和其他信息滾動(dòng)的效果一致，為了實(shí)現(xiàn)這樣的效果，我們要對(duì)信息列表進(jìn)行處理，將列表的第一條信息插入到列表最后的位置上。當(dāng)列表滾動(dòng)到最后位置后，直接將列表位置設(shè)置為開(kāi)始位置。
data () {
return {
noticePosition: 0 // 列表位置
}
},
compiled () {
let destination = 30
setInterval(() => {
if (destination / 30 < this.notices.length) {
this.move(destination, 500)
destination += 30
} else { // 列表到底
this.noticePosition = 0 // 設(shè)置列表為開(kāi)始位置
destination = 30
this.move(destination, 500)
destination += 30
}
}, 2500)
},
methods: {
move (destination, duration) { // 實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)
let speed = ((destination - this.noticePosition) * 1000) / (duration * 60)
let count = 0
let step = () => {
this.noticePosition += speed
count++
console.log(this.noticePosition)
rAF(() => {
if (this.noticePosition < destination) {
step()
} else {
this.noticePosition = destination
}
})
}
step()
}
}
處理信息列表
之前提到要實(shí)現(xiàn)循環(huán)滾動(dòng)效果，我們需要對(duì)信息列表進(jìn)行處理，處理很簡(jiǎn)單，將列表的第一條信息插入到列表最后的位置上就可以了，我們?cè)趐rops中實(shí)現(xiàn)：
props: {
notices: {
type: Array,
required: true,
coerce (data) {
data.push(data[0])
return data
}
}
},
