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>

    效果如下:

  • 相关阅读:
    Freemarker list的使用
    Java通过流对MP4视频文件进行加密,H5 video播放流
    阿里云API公共参数的获取
    javah找不到类文件
    Java调用打印机打印指定路径图片
    Java绘制图片并进行合成
    Java生成二维码和解析二维码URL
    计算机网络第六版知识大纲
    Linux安装mysql mysql5.5.40 <NIOT>
    rsync unison+inotify双向实时同步
  • 原文地址:https://www.cnblogs.com/JonaLin/p/11865246.html
Copyright © 2011-2022 走看看