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

其实,这种用在vue项目中的需求跟原生js的实现方法基本一致,且实现的方法有多种,今天就单拎出来一种实现方法吧:

<div class="scroll-up" ref="scroll">
<ul>
<li v-for="item in scrollData" :key="item.id"><router-link to="">{{item.title}}</router-link></li>
</ul>
</div>
export default {
data() {
return {
scrollData: [
{ id: 1, title: '架不住公司高层喜欢这种玩意儿' },
{ id: 2, title: '用在vue项目中的需求跟原生js的实现方法' },
{ id: 3, title: '文字间歇无缝向上滚动' },
{ id: 4, title: '即使你有一百个不乐意,谁让是人家给你发工资呢' },
{ id: 5, title: '今天就单拎出来一种实现方法' },
],
scrollArea: '',
speed: 20,
timer: null,
delay: 3000,
liHeight: '',
};
},
mounted() {
this.$nextTick(() => {
this.scrollArea = this.$refs.scroll;
let li = this.scrollArea.getElementsByTagName("li");
this.liHeight = li[0].offsetHeight;
this.scrollArea.scrollTop = 0;
this.scrollArea.innerHTML += this.scrollArea.innerHTML; this. scrollData.length > 1 && setTimeout(this.startScroll, this.delay);
})
},
methods: {
startScroll(){
this.timer = setInterval(this.scrollUp, this.speed);
this.scrollArea.scrollTop++;
},
scrollUp(){
if(this.scrollArea.scrollTop % this.liHeight == 0){
clearInterval(this.timer);
setTimeout(this.startScroll, this.delay);
}else{
this.scrollArea.scrollTop++;
if(this.scrollArea.scrollTop >= this.scrollArea.scrollHeight / 2){
this.scrollArea.scrollTop = 0;
}
}
},
}
}
<style scoped>
.scroll-up{height:50px;line-height:50px;overflow:hidden;}
</style>

就酱!

vue文字间歇无缝向上滚动的更多相关文章

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

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

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

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

  3. js实现文字列表无缝向上滚动

    body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...

  4. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

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

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

  6. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  7. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  8. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  9. 提示消息无缝向上滚动(vue)

    <div class="order-tips__message-item" :class="getClass(index)" v-for="(o ...

随机推荐

  1. 在vuex的mutations中使用vue的小技巧

    问题: 在vuex组件中的mutations属性中的定义的函数,有时会要用到vue这个对象.正常在其他的地方使用是通过this这个变量来获取,但是在mutations定义的函数中this指定的是Vue ...

  2. tf.variable_scope 参数

    最近在看TensorFlow的变量管理,发现很多代码中tf.variable_scope()参数的数量及意义还不太清楚,特此记录: def __init__(self, name_or_scope, ...

  3. JPA+Postgresql+Spring Data Page分页失败

    按照示例进行如下代码编写 Repository Page<DeviceEntity> findByTenantId(int tenantId, Pageable pageable); se ...

  4. Mac下SVN基本操作和常见错误

    一.基本操作 1  从服务器上下载代码 svn checkout http://xxx.xxx.xxx/xxx 2  获取最新的代码 svn update 3  提交代码 svn commit -m ...

  5. win10 uwp 使用 LayoutTransformer

    如果需要使用旋转,那么很容易把图片旋转的布局被裁剪.如果需要旋转的控件还在指定的 Grid 内,就需要使用布局的旋转.本文告诉大家如何使用 LayoutTransformer.需要知道,uwp是没有 ...

  6. es6笔记 day4---模块化

    模块化: 注意:需要放到服务器环境 1.如何定义模块? export  东西 export   const a = 12; export { a  as  aaa, b  as  banana } 2 ...

  7. 字符串和While循环

    字符串是以单引号或双引号括起来的任意文本 创建字符串 str1 = "shaoge is a good man!" 字符串运算 字符串连接 str6 = "shaoge ...

  8. vue-learning:14 - js - new Vue(options)中option

    new Vue(options)中option 2019-4-14 Vue的核心是数据驱动,在template中实现视图逻辑,在javascript中实现业务逻辑.要通过模板template将数据显示 ...

  9. ABP运行Login failed for user 'IIS APPPOOL XXXXX Reason: Could not find a login matching the name provided问题解决

    我们在ABP官网上面生成解决方案后,编译完成,将数据库连接字符串中的Ip改成自己的测试数据库Ip直接在Vs里面调试运行没有任何问题. 发布之后到文件夹后运行,就报如下图异常. VS里面可以跑起来,单独 ...

  10. FCKeditor使用

    fckeditor - (1)资料介绍与安装 fckeditor介绍  FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器.  1.fckeditor官网:http://ww ...