vue垂直滚动文字公告效果

想做一个垂直滚动的公告栏效果，网上找了好久才找到一个靠谱的，有的不滚动，后来才研究清楚几个关键的知识。

1. 只要把第一个div向上滚动，后面的兄弟div不需要代码控制，它们会自动上移。

2. that.play = false 一定要修改属性，只有修改属性才能触发控件重绘,才会有移动效果。

下面是具体的代码：VerticalScrollText.vue

<template><div id="demo"><div class="list"><div class ="child" v-for="(item, index) in ulList" :key="item.id" :class="!index && play? 'toUp' : ''">{{ item.msg }} !</div></div></div>
</template><script>
export default {mounted() {setInterval(this.startPlay, 2000)},data() {return {ulList: [{ msg: '这是第一条信息' },{ msg: '这是第二条信息' },{ msg: '这是第三条信息' },{ msg: '这是第四条信息' },{ msg: '这是第五条信息' },{ msg: '这是第六条信息' },{ msg: '这是第七条信息' },{ msg: '这是第八条信息' },{ msg: '这是第九条信息' },{ msg: '这是第十条信息' }],play: true}},methods: {startPlay() {let that = thisthat.play = true //开始播放setTimeout(() => {that.ulList.push(that.ulList[0]) //将第一条数据塞到最后一个that.ulList.shift() //删除第一条数据that.play = false //暂停播放,此处修改，保证每一次都会有动画显示。 一定要修改属性，只有修改属性这样才能触发控件刷新冲毁!!!!}, 1000)},//只要对第一行进行滚动，下面的自动会跟着往上移动。isScroll(index){if(index == 0){return true}else{return false}}}
}
</script><style lang="scss" scoped>.list {list-style: none;width: 500px;text-align: center;overflow: hidden;background-color: #ff8833;height: 40px;color: #ffff00;padding: 0;margin: 10px 0px 0px 10px;padding-left: 10px;
}.child {text-align: left;   /**覆盖外层设置的水平居中效果**/height: 40px;line-height: 40px;  /**span 垂直居中需要这一句**/
}.toUp {margin-top: -40px;  //向上移transition: all 0.5s;
}</style>

为了加深理解，又写了一个场景示例：

<template><!--消息通知效果--><div id="box"><ul id="msg-container"><li class="child" v-for='(item, index) in msg' :class="!index && animate ? 'toUp' : ''">{{ item.name }}抽中 {{item.goods}} ----------> {{ item.count == 0 ? randomNum(item) : item.count }}人获得优惠券</li></ul></div></template><script>export default {name: "hello",head: {title: "测试网站"},data() {animate: false,setInTime: '', // 定时器msg: [{name: '张**',goods: '牙膏',count: 0,},{name: '王**',goods: '牙刷',count: 0,},{name: '钟**',goods: '肥皂',count: 0,}]}},mounted() {this.setInTime = setInterval(this.showMarquee, 2000);},destory() {clearInterval(this.setInTime) // 页面销毁时清除定时器},methods: {//生成随机数randomNum(item) {if (item.count == 0) {item.count = Math.ceil(Math.random() * 10000);}},// 滚动栏滚动showMarquee() {this.animate = truesetTimeout(() => {this.msg.push(this.msg[0])  将第一条数据塞到最后一个this.msg.shift() // //删除第一条数据this.animate = false}, 1000)},}}</script><style>#msg-container {width: 500px;height: 80px;background: #AB2D00;color: #ffffff;text-align: center;border-radius: 18px;overflow: hidden;padding-left: 10px;
}.child {height: 40px;line-height: 40px; /**有这一句span元素才能垂直居中**/text-align: left;
}.toUp {margin-top: -40px;transition: all 1s
}</style>

vue垂直滚动文字公告效果相关推荐

vue中滚动文字公告（2）-transition-slide
思路: 利用js代码控制显示内容,用<transition>改变过渡样式优势:效果可调劣势:代码较多代码: <template><div><div cl ...
Android TextView竖直滚动文字广告效果
项目需要 TextView 单行竖直滚动文字广告效果,很简单的功能在网上找了很多没有想要的效果.开始找到的<android TextView 垂直自动滚动>,歌词效果,对代码处理一下变成单 ...
jq文字垂直滚动/滚屏效果
下载地址:https://github.com/ybx13579/text-verticality-scroll 直接复制文本即可查看,或点击 ↑ 地址下载查看效果预览 <!DOCTYPE h ...
报表怎样实现滚动的公告效果？
Dashboard以丰富的动态.可交互的可视化界面为用户提供了更好的数据使用体验,让决策者能够更高效的了解企业的重要信息和细节层次.在DBD的各种动态效果中,滚屏是较为常见的一种,例如下图中的数据列表 ...
unity 文字滚动显示_Unity ScrollRect 实现垂直滚动文字
看了一些网上的其他文章,看的比较晕,自己摸索着做了一遍,把几个要点列出来,方便遇到相同问题的人. 1-列出控件,按照下图的方式组织所有的控件,注意不要从GameObject菜单创建ScrollView ...
类似淘宝、京东的热点推荐垂直滚动文字广告条
今天带来的是一个自定义的垂直滚动广告条 VerticalScrollTextView ,但是在介绍这个控件之前,我先想介绍的是我的一个远程库GWidget,这个是我一个专门用来集成各种自定义控件的库, ...
android TextView向上滚动（模仿滚动文字广告效果）
android文字向上滚动效果没有自带的控件,这就需要开发者根据算法精确按照时间和坐标来实现TextView控件的向上移动,从网上找过几个框架,基本都会有bug,于是自己写了一个自定义控件,来实现Te ...
html5滚动文字切换效果代码,js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了 ...
php页头滚动文字公告,jQuery公告栏文字滚动插件
jQue作一新求抖直微圈ry插件关于jQue作一新求抖直微圈ry插件,http://www.cnblogs.com/ajianbeyourself/p/5815689.html 这篇文章写得真心不错 ...

vue垂直滚动文字公告效果

下面是具体的代码：VerticalScrollText.vue

为了加深理解，又写了一个场景示例：

vue垂直滚动文字公告效果相关推荐

最新文章

热门文章