向上来回无缝滚动html,js实现-新闻间歇性向上无缝滚动

功能预览

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

assets.html

Hello MUI

• {{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;}