<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文字向上滚动的更多相关文章

  1. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  2. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  3. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. 利用animate.css和es6制作文字向上滚动的效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...

  5. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  6. Jquery实现文字向上逐条滚动

    直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  7. jquery插件之文字间歇自动向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...

  8. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  9. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

随机推荐

  1. python自动华 (十五)

    Python自动化 [第十五篇]:CSS.JavaScript 和 Dom介绍 本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 rel ...

  2. Python3发送webservice请求

    Python3使用suds-jurko库来发送webservice接口请求 导入请求webservice接口需要用到的包 pip install suds-jurko 第一步:导入所需要的包 from ...

  3. Java中通过Array.sort()对数组从大到小排序

    package com.itheimajavase; import java.util.Arrays; import java.util.Comparator; public class Day01 ...

  4. P4148 简单题 k-d tree

    思路:\(k-d\ tree\) 提交:2次 错因:整棵树重构时的严重错误:没有维护父子关系(之前写的是假重构所以没有维护父子关系) 题解: 遇到一个新的点就插进去,如果之前出现过就把权值加上. 代码 ...

  5. mouseover([[data],fn])

    mouseover([[data],fn]) 概述 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用.直线电机选型 注释:与 mous ...

  6. v-for为什么要加key,能用index作为key么

    前言 在vue中使用v-for时,一直有几个疑问: v-for为什么要加key 为什么有时候用index作为key会出错 带着这个疑问,结合各种博客和源码,终于有了点眉目. virtual dom 要 ...

  7. Cogs 1500. 误差曲线(三分)

    误差曲线 ★★ 输入文件:errorcurves.in 输出文件:errorcurves.out 评测插件 时间限制:1 s 内存限制:256 MB [题目描述] Josephina是一名聪明的妹子, ...

  8. Python学习日记(二)——字符转编码操作

    首先搞清楚:Python3的默认编码是unicode,Python2的默认编码是ASCII码 为什么需要编解码? 打个比方:假如说我做了一个游戏,叫<西游记>,游戏传到了日本去.但是日本人 ...

  9. mysql —复制

    MySQL的扩展 读写分离  复制:每个节点都有相同的数据集 向外扩展 二进制日志 单向 复制的功用: 数据分布 负载均衡读 备份 高可用和故障切换 MySQL升级测试 MySQL复制相关概念 主从复 ...

  10. Highcharts 使用总结

    一.Highcharts  series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" ...