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

功能预览
参考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;}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容