<ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
? <li v-for="item in noticeList">
? ? ...
? </li>
</ul>

<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? noticeList: [],
? ? ? ? animate:false,
? ? ? ? intNum: undefined,
? ? ? }
? ? },
? ? created: function () {
? ? ? this.getNoticeData();
? ? },
? ? methods: {
? ? ? getNoticeData() {
? ? ? ? this.$http.get('/news/allList', {
? ? ? ? ? params: {
? ? ? ? ? ? 'pageNumber': 10,
? ? ? ? ? ? 'currentPage': 1
? ? ? ? ? }
? ? ? ? }).then(res => {
? ? ? ? ? this.noticeList = res.data.items;
? ? ? ? ? this.ScrollUp();
? ? ? ? });
? ? ? },
? ? ? ScrollUp() {
? ? ? ? this.intNum = setInterval(() => {
? ? ? ? ? this.animate=true;// 向上滾動(dòng)的時(shí)候需要添加css3過(guò)渡動(dòng)畫
? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? this.noticeList.push(this.noticeList[0]);// 將數(shù)組的第一個(gè)元素添加到數(shù)組的
? ? ? ? ? ? this.noticeList.shift(); //刪除數(shù)組的第一個(gè)元素
? ? ? ? ? ? this.animate=false;
? ? ? ? ? },500)
? ? ? ? }, 10000);
? ? ? },
? ? ? //鼠標(biāo)移上去停止
? ? ? Stop() {
? ? ? ? clearInterval(this.intNum);
? ? ? },
? ? ? Up() {
? ? ? ? this.ScrollUp();
? ? ? },
? ? }
? }
</script>

.new-list{
? ? line-height: 28px;
? ? transition: top 0.5s;
}
.anim{
? ? transition: all 0.5s;
? ? margin-top: -28px;//高度等于行高
}