滚动公告 vue.js

系统管理员 2023-06-06 10:38 25阅读 0赞

也可以用vue动画去做

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70][]

vue.js

代码如下：

<html>

<head>

<meta charset="UTF-8">

<title>最新战报</title>

<style>

</style>

</head>

<body>

<div class="vueBox">

<div class="marquee">

<div class="marquee\_title">

<span>最新战报</span>

</div>

<div class="marquee\_box">

<ul class="marquee\_list" :class="\{marquee\_top:animate\}">

<li v-for="(item,index) in marqueeList">

<span>\{ \{item.name\}\}</span>

<span>在</span>  
<span class="red"> \{ \{item.city\}\}</span>  
<span>杀敌</span>  
<span class="red"> \{ \{item.amount\}\}</span>  
 <span>万</span>

</li>

</ul>

</div>

</div>

</div>

</body>

<script type="text/javascript">  
    const vm = new Vue(\{  
        el: ".vueBox",  
        data: \{  
            animate: false,  
            marqueeList: \[  
                \{  
                    name: '1军',  
                    city: '北京',  
                    amount: '10'  
                \},  
                \{  
                    name: '2军',  
                    city: '上海',  
                    amount: '20'  
                \},  
                \{  
                    name: '3军',  
                    city: '广州',  
                    amount: '30'  
                \},  
                \{  
                    name: '4军',  
                    city: '重庆',  
                    amount: '40'  
                \}  
            \]  
        \},  
        created: function () \{  
            setInterval(this.showMarquee, 2000)  
        \},  
        methods: \{  
            showMarquee: function () \{  
                this.animate = true;  
                setTimeout(()=>\{  
                    this.marqueeList.push(this.marqueeList\[0\]);  
                this.marqueeList.shift();  
                this.animate = false;  
            \},500)\},  
        \}  
    \});  
</script>

</html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70]: /images/20230601/ec57bc906b8f4a88afb782775fc9b14c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android新闻公告切换效果(上下滚动&左右滚动)

今日，看到淘宝的一个效果，之前做的App中没做过，就实现了一下。使用的是原生的控件TextSwitcher，进行了简单的封装处理。 ![Android新闻公告切换效果][A

- 日理万妓/ 2023年06月19日 09:59/ 0 赞/ 139 阅读

相关滚动公告 vue.js

也可以用vue动画去做 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

系统管理员/ 2023年06月06日 10:38/ 0 赞/ 26 阅读

相关 vuejs滚动到选中的位置

关键代码： this.$nextTick(() => { //滚动到选中的位置 this.$el.querySelec

深碍√TFBOYSˉ_/ 2022年12月31日 05:22/ 0 赞/ 153 阅读

相关小程序上下滚动公告实现

<!-- <swiper class="swiper_container" vertical="true" autoplay="

水深无声/ 2022年12月30日 03:37/ 0 赞/ 270 阅读

相关 html滚动信息栏,公告滚动.html

dodou-移动框架 \scrollDiv\{height:40px;line-height:40px;overflow:hidden; background:url(ima

系统管理员/ 2022年10月06日 10:53/ 0 赞/ 276 阅读

相关 Android滚动字幕公告控件

Android滚动字幕公告控件效果 Gradle 使用属性地址效果字体长度过大滚动字体，结束

Dear 丶/ 2022年09月17日 06:26/ 0 赞/ 380 阅读

相关公告——实现两个公告同屏滚动轮播(elementUi-走马灯效果实现)

最近在做电商前台页面，需要实现的功能是：两组数据同屏竖向滚动轮播： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad

缺乏、安全感/ 2022年09月01日 14:52/ 0 赞/ 908 阅读

相关公告循环向上滚动

html: <div class="scroll-wrap" style="height: 16px; overflow: hidden;">

超、凢脫俗/ 2022年07月28日 11:48/ 0 赞/ 280 阅读

相关 vuejs日常-绑定滚动事件

与scroll相关的方法： 4个window对象下：scrollX、scrollY、scrollTo、scroll（作用和scrollTo一样） 4个Elem

小鱼儿/ 2022年06月04日 03:58/ 0 赞/ 447 阅读

相关 JQuery 公告滚动(跑马灯特效)

一.公告向左滚动 ![20170713135450828][] <!DOCTYPE HTML> <html> <head> <meta charset="ut

短命女/ 2021年09月13日 14:48/ 0 赞/ 472 阅读