zoukankan      html  css  js  c++  java
  • 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>

    效果如下:

  • 相关阅读:
    查看网桥
    openstack 网卡
    fuel3.2安装
    whereis命令查看你要添加的软件在哪里
    ubuntu12.04开启远程桌面
    ubuntu 右键添加terminal
    本地源设置方法:
    ubuntu的dns设置
    chubu
    Linux内存
  • 原文地址:https://www.cnblogs.com/JonaLin/p/11865246.html
Copyright © 2011-2022 走看看