功能预览
参考js实现-新闻间歇性向上无缝滚动 , 实现在vue中新闻列表的无限滚动， 代码如下
assets.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body style="background: #ffffff;">
<div id="rrapp" class="pb66">
<div id="refreshContainer">
<div class="announce">
<span class="icos_announce"></span>
<ul class="announce_main" id="moocBox">
<li v-for="(item,index) in news"><a href="#">{{item}}. 最新版本已上线，请更新</a></li>
</ul>
</div>
</div>
</div>
<script src="../js/lib/mui.min.js"></script>
<script src="../js/lib/vue.min.js"></script>
<script src="../js/common/assets.js"></script>
</body>
</html>
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;}
