基础要求
知道如何使用vue-cli
熟悉vue1.0、了解sass
准备工作
使用vue-cli安装vue1.0 webpack框架
安装node-sass、sass-loader
插件编写
滚动信息插件主要分为三部分，一是滚动信息样式，二是滚动动画的实现，三是信息列表的处理
样式编写
show-notice固定高度，并且设置overflow: hidden;只有notice-list与show-notice重叠的部分才会显示出来。noticePosition设置notice-list位置，可以通过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>
实现滚动动画
信息滚动流程为：停止=>滚动=>停止，当滚动到最后一条的信息时，又滚动回第一条信息，循环往复。因为滚动动画的效果应该是一致的，所以最后一条信息滚动回第一条信息的效果也应该和其他信息滚动的效果一致，为了实现这样的效果，我们要对信息列表进行处理，将列表的第一条信息插入到列表最后的位置上。当列表滚动到最后位置后，直接将列表位置设置为开始位置。
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 // 设置列表为开始位置
destination = 30
this.move(destination, 500)
destination += 30
}
}, 2500)
},
methods: {
move (destination, duration) { // 实现滚动动画
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()
}
}
处理信息列表
之前提到要实现循环滚动效果，我们需要对信息列表进行处理，处理很简单，将列表的第一条信息插入到列表最后的位置上就可以了，我们在props中实现：
props: {
notices: {
type: Array,
required: true,
coerce (data) {
data.push(data[0])
return data
}
}
},
