vue项目新闻消息向上滚动案例

效果如下图所示：

代码组件如下：

<template><div class="message-page"><div class="msg-tit"><div class="msg-top"><div class="tit-word">消息通知</div><div class="tit-more">查看更多></div></div><div class="msg-line"></div><div class="marquee-wrap"><ul class="marquee-list" :class="{'animate-up': animateUp}" @mouseenter="stopFn" @mouseleave="startFn"><li v-for="(item, index) in listData" :key="index"><div ><p class="p-tit">{{item.title}}</p><p class="p-word">{{item.content}}</p></div></li></ul></div></div></div>
</template><script>export default {name: 'MessagePage',data(){return{listData: [{'title': '新闻热点','content': '据@新华视点 消息，外交部发言人华春莹31日就BBC驻华记者沙磊离任一事表示，沙磊离任前没有履行一个外国常驻记者离任前应该履行的手续，他是不辞而别。新疆一些民众和实体打算因沙磊制造涉疆假新闻起诉他，这完全是民间行为，是民众运用法律手段来维护自身荣誉和利益。如果沙磊认为他的报道是公正客观的，那就应该勇敢应诉。但是他跑什么？说明了什么问题？华春莹表示，BBC散布大量虚假信息，遭到中国人民强烈反对。BBC在国际议题上的造假行为，甚至到了BBC内部人都看不下去的地步'}, {'title': '无缝滚动第二行无缝滚动第二行','content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'}, {'title': '无缝滚动第三行无缝滚动第三行','content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'}, {'title': '无缝滚动第四行无缝滚动第四行','content': '2枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯6'}, {'title': '无缝滚动第五行无缝滚动第五行','content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'}, {'title': '无缝滚动第六行无缝滚动第六行','content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'}, {'title': '无缝滚动第七行无缝滚动第七行','content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'}, {'title': '无缝滚动第八行无缝滚动第八行','content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'}, {'title': '无缝滚动第九行无缝滚动第九行','content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'}],animateUp: false,timer: null}},computed: {/*top () {return -this.activeIndex * 50 + 'px'}*/},created() {this.timer = setInterval(this.scrollAnimate, 1500);},methods:{scrollAnimate() {this.animateUp = truesetTimeout(() => {this.listData.push(this.listData[0])this.listData.shift()this.animateUp = false}, 500)},stopFn(){clearInterval(this.timer)},startFn(){this.timer = setInterval(this.scrollAnimate, 1500);}},destroyed() {clearInterval(this.timer)}}
</script><style scoped lang="less">.message-page{border: 1px solid transparent;margin-top: 24px;width: 800px;height: 147px;background: #FFFFFF;border-radius: 4px;/**/.msg-tit{padding: 20px 16px 24px 16px;.msg-top{display: flex;justify-content: space-between;.tit-word{font-size: 16px;color: #222222;}.tit-more{color: #666666;font-size: 12px;text-decoration: underline;&:hover{cursor: pointer;}}}.msg-line{width: 768px;height: 1px;background: #EFEFEF;margin: 16px 0;}.marquee-wrap  {/*width: 80%;*/height: 48px;margin: 0 auto;overflow: hidden;.marquee-list {/*border: 1px solid red;*/li {width: 100%;height: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;list-style: none;font-size: 18px;font-weight: 400;.p-tit{font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;color: #222222;height: 22px;line-height: 22px;}.p-word{margin-top: 8px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;color: #666666;height: 18px;line-height: 18px;width: 767px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}}.animate-up {transition: all 0.5s ease-in-out;transform: translateY(-48px);}}}}
</style>

vue项目新闻消息向上滚动案例相关推荐

JS新闻消息上下滚动
新闻消息上下滚动使用原生js写原理:获取每隔li的高度,开始执行就把第一个放到最后一个后边去,然后整个ul向上移动一个li的高度,之后再回到0. 用到的知识点:获取元素高度.移动元素的位置.ani ...
vue项目实现表格定时滚动
两种方法实现vue项目实现表格滚动 1.拖动元素实现 2. 改变数据实现 1.拖动元素实现原理:全部数据渲染出来,只展示规定的几条数据,配合css隐藏掉多余的部分,js通过定时器将需要拖动的元素向上 ...
Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿从头至尾再循环播放时没有停顿实现这种情况可以使用CSS3的动画实现 ...
vue 列表内容自动向上滚动_【功能记录】Vue列表向上滚动无缝连接
最近给朋友帮忙的时候遇到一个列表向上滚动无缝连接功能的需求,整理了下思路,把这个功能草草的做出来了,尚未做优化完善,先记录一下吧~ Html代码 {{item.accountName}} {{item ...
VeeValidate在vue项目里表单校验应用案例
VeeValidate是什么: VeeValidate是Vue.js的验证库,它有很多验证规则,并支持自定义规则.它基于模板,因此它与HTML5验证API相似并且很熟悉.您可以验证HTML5输入以及自 ...
cytoscape.js在vue项目中的安装及案例
1. 安装: npm i cytoscape --save 2. 引入:main.js import cytoscape from 'cytoscape'; Vue.prototype.$cytosc ...
在vue项目中操作元素ref案例；
原博主链接 <!--* @Description:会动的词云* @Author: Vergil* @Date: 2021-08-25 14:17:45* @LastEditTime: 2021- ...
vue如何实现消息的无缝滚动
vue如何实现消息的无缝滚动 export default { data() { return { animate:false, items:[ {name:"马云"}, {nam ...
文字向上滚动+动画（改进版）
前端时间帮朋友写了个动画效果传送门朋友用了之后反馈说放到app的webview中有卡顿现象,然后他发我一个改进版,思路差不多 <template><div id="box ...

vue项目新闻消息向上滚动案例

vue项目新闻消息向上滚动案例相关推荐

最新文章

热门文章