Vue 垂直无缝滚动

imPony 发布于：2017-12-12 12:03:57

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直无缝滚动</title>
<style>
* { margin: 0; padding: 0; }
#box { width: 300px; height: 32px; overflow: hidden; padding-left: 30px; border: 1px solid #000; }
.anim { transition: all 0.5s; margin-top: -30px; }
.list li { list-style: none; line-height: 30px; height: 30px; }
</style>
</head>
<body>

<div id="box">
    <ul :class="['list', { anim: animate == true }]">
        <li v-for='item in items'>{{item.name}}</li>
    </ul>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script>
var vm = new Vue({
    el: "#box",
    data: {
        animate: false,
        items: [
            { name: "马云" },
            { name: "雷军" },
            { name: "王勤" }
        ]
    },
    created: function () {
        var interval = setInterval(this.scroll, 1000);
    },
    methods: {
        scroll: function () {
            var _this = this;
            _this.animate = true;
            var t = setTimeout(function () {
                _this.items.push(_this.items[0]);
                _this.items.shift();
                _this.animate = false;
            }, 500);
        }
    }
});
</script>

</body>
</html>

觉得有用请点个赞吧！

6 629

99元开通年度会员！
1000+模块代码随便下载！

Vue 垂直无缝滚动

最新