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