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>
效果如下:
作 者:一支会记忆的笔
---------------------
个性 签名:真正的学习不是记住知识,而是学会如何提出问题,研究问题,解决问题。
如果觉得这篇文章对你有小小的帮助的话,记得在下方“关注”哦,博主在此感谢!