惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
H
Hacker News: Front Page
P
Palo Alto Networks Blog
T
ThreatConnect
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
T
True Tiger Recordings
P
Privacy & Cybersecurity Law Blog
B
Blog
IT之家
IT之家
Last Week in AI
Last Week in AI
F
Full Disclosure
Hacker News: Ask HN
Hacker News: Ask HN
C
Comments on: Blog
Microsoft Azure Blog
Microsoft Azure Blog
C
Cybersecurity and Infrastructure Security Agency CISA
Microsoft Security Blog
Microsoft Security Blog
博客园 - 【当耐特】
N
News and Events Feed by Topic
NISL@THU
NISL@THU
腾讯CDC
雷峰网
雷峰网
Security Latest
Security Latest
李成银的技术随笔
M
Microsoft Research Blog - Microsoft Research
L
LangChain Blog
L
Lohrmann on Cybersecurity
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
C
Check Point Blog
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
博客园 - Franky
N
News | PayPal Newsroom
V
V2EX
A
About on SuperTechFans
The Register - Security
The Register - Security
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google Online Security Blog
Google Online Security Blog
MyScale Blog
MyScale Blog
Cisco Talos Blog
Cisco Talos Blog
Vercel News
Vercel News
WordPress大学
WordPress大学
C
Cyber Attacks, Cyber Crime and Cyber Security
The Hacker News
The Hacker News
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
爱范儿
爱范儿
A
Arctic Wolf
L
LINUX DO - 最新话题
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

博客园 - 此夏_唯美

新概念英语3单词表 git回滚代码 git常用命令大全 element动态表单验证一 vue+element+Cascader 级联选择器任意一级选项,去掉单选框radio vue+wangEditor编辑器,上传图片请求后台接口 vue3+vant4+vuex4入门案例 vue3+vant3封装省市区组件 前端工具vscode将英文设置中文简单方便 vue3打包后一片空白控制台报错 vue实现自定义字体库 element-ui跨行 - 此夏_唯美 Element-ui树形控件el-tree鼠标移入显示隐藏效果超简单 vue表格拖拽使用Sortable插件库 Vue+Element+Table表格动态跨列文章 vue项目浏览器ioc小图标 vue搭建项目iview+axios+less vue移动端在线签名 Vue中的input输入框无法输入强制渲染
vue框架文字滚动插件
此夏_唯美 · 2020-10-27 · via 博客园 - 此夏_唯美

安装:npm install vue-seamless-scroll --save

main.js页面引用:

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

实例:

 1 <template>
 2     <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
 3         <ul class="item">
 4             <li v-for="item in listData">
 5                 <span class="title" v-text="item.title"></span>
 6             </li>
 7         </ul>
 8     </vue-seamless-scroll>
 9 </template>
10 <style lang="scss" scoped>
11     .seamless-warp {
12         height: 229px;
13         overflow: hidden;
14     }
15 </style>
16 <script>
17     export default {
18         data () {
19             return {
20                 listData: [{
21                    'title': '无缝滚动第一行无缝滚动第一行',
22                  }, {
23                     'title': '无缝滚动第二行无缝滚动第二行',
24                  }, {
25                      'title': '无缝滚动第三行无缝滚动第三行',
26                  }, {
27                      'title': '无缝滚动第四行无缝滚动第四行',
28                  }, {
29                      'title': '无缝滚动第五行无缝滚动第五行',
30                  }]
31                 }
32             },
33             computed: {
34                 optionHover () {
35                     return {
36                             hoverStop: false //鼠标悬停关闭
37 
38                             singleWidth: 0, // 单行停顿的宽度(默认值0是无缝不停止的滚动)  
39 
40                             singleHeight:26//单行停顿间距(不需要停顿不设置)
41 
42                             waitTime: 2500//单行停顿时间(不需要停顿不设置)
43 
44                             step: 0.5//向上滚动不停顿
45 
46                              limitMoveNum: 2, // 开始无缝滚动的数据量 
47 
48                              direction: 0, // 0向下 1向上 2向左 3向右
49 
50                              openWatch: true, // 开启数据实时监控刷新dom                             
51 
52                         }
53                 }
54              }
55        }
56 </script>