实现文字的上下滚动使用positon的relative的top属性,通过动态改变top来实现相关内容的更换,通过transion来实现相关的动画效果,

相关的dom内容

<template>
<div class="index">
<div class="scroll">
<ul :style="{top}" :class="{transition:index!=0}">
<li v-for="(item,index) in list">
{{"第"+item+"条数据"}}
</li>
<li>
{{"第"+list[0]+"条数据"}}
</li>
</ul>
</div>
<router-link to="/">hello</router-link>
</div>
</template>

相关css内容

img{width: 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-right: 20px}
ul{position: relative;}
li{overflow: hidden;white-space: nowrap; text-overflow:ellipsis;width: 80%;height: 60px;line-height: 60px;text-align: left;margin: 0;font-size: 14px}
.scroll{height:60px;overflow: hidden;font-size: 0px; position: relative;}
.transition{transition: top 0.5s}

相关script内容

<script>
export default {
name: 'HelloWorld',
data() {
return {
list: [
"一","二","三","四","五","六","七","八","九","十"
],
top: "",
index: 0,
p:""
}
},
mounted() {
this.goScroll()
},
methods: {
goScroll() {
var _this = this;
this.p = setInterval(() => {
console.log(22)
_this.top = -60 * _this.index + 'px';
if (_this.index >= this.list.length + 1) {
_this.index = 0;
_this.top = -0 + 'px';
clearInterval(_this.p);
_this.continueScroll()
} else {
_this.index++;
}
}, 1000)
},
continueScroll(){
var _this=this;
setTimeout(() => {
_this.index=1;
_this.top = -60 * this.index+ 'px';
_this.index++
this.goScroll()
},100);
}
},
destroyed(){
clearInterval( this.p );
}
} </script>

vue实现文字上下滚动的更多相关文章

  1. 利用js来实现文字的滚动(也就是我们常常见到的新闻版块中的公示公告)

    首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...

  2. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  3. jQuery实现公告文字左右滚动

    jQuery实现公告文字左右滚动的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  4. jquery文字上下滚动的实现方法

    jquery实现文字上下滚动的方法. 代码: //上下滚动var textRoll=function(){$('#notice p:last').css({'height':'0px','opacit ...

  5. jquery文字左右滚动

    实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...

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

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

  7. jQuery实现公告文字左右滚动的代码。

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

  8. js文字向上滚动代码

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

  9. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

随机推荐

  1. 十分钟掌握diff&patch用法

    作为程序员,了解diff&patch命令是非常必要的.比如说我们发现某个项目有bug代码,而自己又没有svn的提交权限,那么此时最合适的解决方法就是用diff命令做一个补丁发给项目成员.项目成 ...

  2. nyoj--1036--非洲小孩(区间相交问题)

    非洲小孩 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 家住非洲的小孩,都很黑.为什么呢? 第一,他们地处热带,太阳辐射严重. 第二,他们不经常洗澡.(常年缺水,怎么洗 ...

  3. Java7里try-with-resources分析--转

    原文地址:http://blog.csdn.net/hengyunabc/article/details/18459463 这个所谓的try-with-resources,是个语法糖.实际上就是自动调 ...

  4. 【算法】Bellman-Ford算法(单源最短路径问题)(判断负圈)

    单源最短路问题是固定一个起点,求它到其他所有点的最短路的问题. 算法: 设 d[i]  表示 起点 s 离点 i 的最短距离. [1.初始化]  固定起点s,对所有的点 , 如果 i =  s ,  ...

  5. 登录生成令牌token存于redis

    package com.medic.rest.province.base.home; import java.util.HashMap;import java.util.List;import jav ...

  6. UE4自学随笔(一)

    本文及后续均为个人学习记录所用,难免毫无章法零零碎碎,希望看到此文的诸君勿怪. 一.Actor与Pawn Actor类 在UE4中,Actor类是可以放到游戏场景中的游戏对象的基本类型.你如果想放置任 ...

  7. Python: Json串反序列化为自定义类对象

    最近刚接触到python,就想到了如何反序列化json串.网上找了一下,大部分都是用json模块反序列化为python数据结构(字典和列表).如果对json模块不了解的参考菜鸟教程.然后我在此基础上将 ...

  8. 紫书 例题8-14 UVa 1607 (二分)

    题意非常难理解-- #include<cstdio> #define REP(i, a, b) for(int i = (a); i < (b); i++) using namesp ...

  9. [NOI2002]贪吃的九头龙(树形dp)

    [NOI2002]贪吃的九头龙 题目背景 传说中的九头龙是一种特别贪吃的动物.虽然名字叫"九头龙",但这只是 说它出生的时候有九个头,而在成长的过程中,它有时会长出很多的新头,头的 ...

  10. 2015 Multi-University Training Contest 1 Assignment

    Assignment Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...