没有合适的资源?快使用搜索试试~ 我知道了~
本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <template> <div class=text-container> <transition xss=removed name=slide mode=out-in> <p class=text key=text.id>{{text.val}}</p> </transition> </div> </template> [removed] export default { name: '
资源推荐
资源详情
资源评论



















vue实现公告栏文字上下滚动效果的示例代码实现公告栏文字上下滚动效果的示例代码
本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下:
代码实现:
在项目结构的components中新建text-scroll.vue文件
<template>
<div class="text-container">
<transition class="" name="slide" mode="out-in">
<p class="text" :key="text.id">{{text.val}}</p>
</transition>
</div>
</template>
<script>
export default {
name: 'TextScroll',
props: {
dataList: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
count: 0, // 当前索引
intervalId: null, // 定时器ID
playTime: 2000, // 定时器执行间隔
};
},
computed: {
text() {
return {
id: this.count,
val: this.dataList[this.count],
};
},
},
created() {
this.intervalId = setInterval(() => { // 定义定时器
this.getText();
}, this.playTime);
},
methods: {
getText() {
const len = this.dataList.length; // 获取数组长度
if (len === 0) {
return; // 当数组为空时,直接返回
}
if (this.count === len - 1) { // 当前为最后一个时
this.count = 0; // 从第一个开始
} else {
this.count++; // 自增
}
},
},
destroyed() {
clearInterval(this.intervalId); // 清除定时器
},
};
</script>
<style scoped>
.text-container{
font-size: 14px;
color: #F56B6B;
margin-right: 20px;
height: 60px;
}
.text {
text-align: right;
margin: auto 0;
}
.slide-enter-active, .slide-leave-active {
transition: all 1s;
}
.slide-enter{
transform: translateY(40px);
}
.slide-leave-to {
transform: translateY(-40px);
}
</style>
在header-bar组件使用
<text-scroll :dataList="noticeList"></text-scroll>
分析
资源评论


weixin_38594252
- 粉丝: 7
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 《CC++程序设计》练习题.doc
- 软件外包商业计划书.doc
- 项目管理多选题样本.doc
- 服务器虚拟化技术方案.docx
- 计算机辅助设计复习思考题1.pdf
- 综合布线系统的施工方案.pptx
- 门锁软件使用说明书V.doc
- 南京工业大学 2023-2024 学年程序语言设计(Python 程序设计)部分作业及考试
- 2023年江苏成人计算机统考试题操作题成人大专计算机考试试题模拟试题.doc
- 技术xbee模块及其在楼宇自动化系统中.doc
- 医院网络咨询医生培训教程精华(非原创).pptx
- 基于51单片机的直流双闭环调速系统设计.doc
- 计算机科学与技术专业模拟试题(最终).doc
- 哈工程网络安全实验实验报告.doc
- 单片机项目结题报告之流水灯.docx
- 中央企业开展网络安全工作的策略与方法.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



安全验证
文档复制为VIP权益,开通VIP直接复制
