码迷,mamicode.com
首页 > 其他好文 > 详细

vue文字向上滚动

时间:2019-11-15 12:34:11      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:option   from   false   class   height   bsp   col   ext   item   

<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>

效果如下:

技术图片

 

 

vue文字向上滚动

标签:option   from   false   class   height   bsp   col   ext   item   

原文地址:https://www.cnblogs.com/JonaLin/p/11865246.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!