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>

    效果如下:

  • 相关阅读:
    随笔为什么还要想标题
    [GXYCTF2019]BabySQli
    [CISCN2019 华北赛区 Day2 Web1]Hack World
    20年美亚杯个人赛-ALICE_USB部分WRITE UP
    20年美亚杯个人赛-Alice LG Phone部分WRITE UP
    20年美亚杯个人赛-Alice_Laptop部分WRITE UP
    20年美亚杯WRITE UP
    18年美亚杯团体赛-C部分 WRITE UP
    v&n赛 ML 第一步(python解决)
    CTFHub web技能树 RCE
  • 原文地址:https://www.cnblogs.com/JonaLin/p/11865246.html
Copyright © 2011-2022 走看看