vue文字向上滚动

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>

效果如下:

以上是 vue文字向上滚动 的全部内容, 来源链接: utcz.com/z/376099.html

回到顶部