js实现-新闻间歇性向上无缝滚动

功能预览

参考js实现-新闻间歇性向上无缝滚动 , 实现在vue中新闻列表的无限滚动， 代码如下

assets.html

    
        
        
        
        
        

        
        
    

    
        

            

                

                    
                    
           
                        
{{item}}. 最新版本已上线，请更新
                    
                
            
        
        
        
        

    

assets.js

var vm = new Vue({
    el: '#rrapp',
    data: {
        news:[1,2,3,4,5]
    },
    created: function() {
        var self = this;
        mui.init({});
        mui.plusReady(function() {}, false);
    },
    methods: {},
})
var area = document.getElementById('moocBox');
var iliHeight = 34; //单行滚动的高度
var speed = 1; //滚动的速度
var time;
var delay = 3000;
area.scrollTop = 0;
area.innerHTML += area.innerHTML; //克隆一份一样的内容
function startScroll() {
    time = setInterval("scrollUp()", speed);
    area.scrollTop++;
}

function scrollUp() {
    if(area.scrollTop % iliHeight == 0) {
        clearInterval(time);
        setTimeout(startScroll, delay);
    } else {
        area.scrollTop++;
        if(area.scrollTop >= area.scrollHeight / 2) {
            area.scrollTop = 0;
        }
    }
}
setTimeout(startScroll, delay);

style.css

.announce{ margin-top: 100px; padding:0 15px; background:#FFF; border-bottom:1px solid #E5E5E5; height:34px; position:relative; overflow:hidden;}
.announce_main{ height:34px; overflow:hidden; width:100%;font-size:1.2rem;line-height:34px; margin: 0;}
.announce_main li{ height:34px; overflow:hidden; width:100%; vertical-align:top;}
.announce_main a{color:#848484; display:block; font-size: 14px;}
.icos_announce{ background: url(../images/notice_zichan_.png) no-repeat center; background-size:100%; width:20px; height:20px; position:absolute; left:15px; top:50%; margin-top:-10px;}