vue文字向上滾動


<template>
    <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
        <ul class="item">
            <li v-for="item in listData">
                <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
            </li>
        </ul>
    </vue-seamless-scroll>
</template>

<script>
    import Vue from 'vue'
    import scroll from 'vue-seamless-scroll'
    Vue.use(scroll)
    export default {
        data () {
            return {
                listData: [{
                    'title': '無縫滾動第一行無縫滾動第一行',
                    'date': '2017-12-16'
                }, {
                    'title': '無縫滾動第二行無縫滾動第二行',
                    'date': '2017-12-16'
                }, {
                    'title': '無縫滾動第三行無縫滾動第三行',
                    'date': '2017-12-16'
                }, {
                    'title': '無縫滾動第四行無縫滾動第四行',
                    'date': '2017-12-16'
                }, {
                    'title': '無縫滾動第五行無縫滾動第五行',
                    'date': '2017-12-16'
                }, {
                    'title': '無縫滾動第六行無縫滾動第六行',
                    'date': '2017-12-16'
                }, {
                    'title': '無縫滾動第七行無縫滾動第七行',
                    'date': '2017-12-16'
                }, {
                    'title': '無縫滾動第八行無縫滾動第八行',
                    'date': '2017-12-16'
                }, {
                    'title': '無縫滾動第九行無縫滾動第九行',
                    'date': '2017-12-16'
                }]
            }
        },
        computed: {
            optionHover () {
                return {
                    hoverStop: false, //是否懸停
            
singleHeight:26, // 單行停頓
            waitTime:2500, //單行停頓時間

         }
 } } } </script>
<style lang="scss" scoped> .seamless-warp { height: 229px; overflow: hidden; } ul li{ list-style-type:none; } </style>

效果如下:

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM