记录一下单行列表自动循环滚动-----新闻通告等

一、第一种方式：滚动ul + animate方法

        不足之处： 存在浏览器兼容性问题，低版本浏览器无效

代码：

        html:

<div class="notice"">
       <ul id="notice-ul">
            <li v-for="i in 6" :key="i">第{{ i }}条公告哈哈哈哈哈哈</li>
       </ul>
</div>

vue:

data() {
    return {
         timerNotice: null, // 通知滚动定时器
    }
}
beforeDestroy() {
        // 销毁定时器
        clearInterval(this.timerNotice);
},
methods: {
     // 鼠标移入移出topic-ul,
        mouse() {
            let _this = this
            const el = document.getElementById('notice-ul');
            el.addEventListener('mouseenter' , function(){
                clearInterval(_this.timerNotice);
            })
            el.addEventListener('mouseleave' , function(){
                _this.startAnimation();
            })

        },
        // 开始滚动
        startAnimation() {
            // 调用 公告滚动函数
            /*
            通知滚动
            * 参数说明
            * obj : 动画的节点，本例中是ul
            * top : 动画的高度，本例中是-35px;注意向上滚动是负数
            * time : 动画的速度，即完成动画所用时间，本例中是500毫秒，即marginTop从0到-35px耗时500毫秒
            * function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;
            * 
            */ 
		    this.timerNotice = setInterval((obj = 'notice-ul',top = '-35px',time = 500)=> {
                 const el = document.getElementById(obj)
                el.animate({
                marginTop: top
                    }, time, function () {
                    el.css({marginTop:"0"}).find(":first").appendTo(this);
                    })
            }, 3000);
        },

}

css:

.notice-search {
    display: flex;
    justify-content: space-between !important;
    .notice {
        flex: 1;
        display: flex;
        height: 35px;/*固定公告栏显示区域的高度*/
        overflow: hidden;
        margin-right: 20px;
        color: #fff;
        display: flex;
    }
    .notice img {
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 20px;
        height: 20px;
    }
    .notice ul {
        padding-left: 10px;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
    }
    .notice ul:hover {
	animation-play-state:paused;
}

    .notice ul li {
        margin: 0;padding: 0;
        list-style: none;
        line-height: 35px;
        /*以下为了单行显示，超出隐藏*/
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
    }
    .search-box {
        display: flex;
        justify-content: flex-end;
        flex: 1;
        text-align: right;
    }
}

二、第二种方式：滚动li

        优点： 兼容性好

代码：

        html:

<div class="notice">
                <ul id="notice-ul">
                    <li @click="details(notice)" v-for="(notice,index) in homeNoticeList" :key="index">{{notice.title}}</li>
                </ul>
            </div>

vue: 

data() {
    return: {
        timerNotice: null, // 通知滚动定时器
    }
}
 beforeDestroy() {
        // 销毁定时器
        clearInterval(this.timerNotice);
    },
methods: {
            // 鼠标移入移出topic-ul,
        mouse() {
            let _this = this
            const el = document.getElementById('notice-ul');
            el.addEventListener('mouseenter' , function(){
                clearInterval(_this.timerNotice);
            })
            el.addEventListener('mouseleave' , function(){
                _this.startAnimation();
            })

        },
        // 开始滚动
        /* 参数说明
            * obj : 动画的节点，本例中是ul
            * top : 动画的高度，本例中是-35px;注意向上滚动是负数
            * function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;

            *
            */
        startAnimation(obj = 'notice-ul', top = 35, interval = 5000) {
            const el = document.getElementById(obj)
            if(el) {
                const _heigth = "-" + top + 'px'
                const _field = el.firstElementChild;
                const _childs = el.getElementsByTagName('li')
                // 只有一个li不需要滚动
                if(_childs.length >1 && _field) {
                    _field.style.marginTop = _heigth;
                    this.timerNotice = setInterval(()=> {
                            var _field = el.firstElementChild;
                            _field.style.marginTop = "0px";
                            el.appendChild(_field);
                            var _field = el.firstElementChild;
                            _field.style.marginTop = _heigth;
                    }, interval);
                }
                

            }
           
        },
}

css: 

    .notice {
        flex: 1;
        display: flex;
        height: 35px;/*固定公告栏显示区域的高度*/
        overflow: hidden;
        margin-right: 20px;
        color: #fff;
        display: flex;
    }
 
    .notice ul {
        padding-left: 10px;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
    }
    .notice ul:hover {
	animation-play-state:paused;
}

    .notice ul li {
        list-style: none;
        line-height: 35px;
        /*以下为了单行显示，超出隐藏*/
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
    }
    .notice ul li:first-child {
		margin-top: 0;
		transition: margin-top 1s;
	}