首页
视频
资源
登录
小可爱
什么时候才能领悟,取之越多失之越多
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
ASP.NET
16篇
JS
1篇
.NET
23篇
英语
4篇
redis
4篇
随笔
30篇
EF
3篇
前端
53篇
.net core
25篇
python
8篇
版本控制
1篇
java
2篇
nginx
2篇
docker
6篇
后端
5篇
更多
mysql
8篇
数据库
15篇
微服务
4篇
移动开发
7篇
架构
6篇
linux
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
转
vue实现数据滚动。vue实现列表自动滚动的方式
3068
人阅读
2023/3/9 16:23
总访问:
876450
评论:
0
收藏:
0
手机
分类:
前端
### 代码如下 代码是在原有基础上增加了一点测试数据就可以运行的 ``` <template> <div class="orderProcess"> <div class="loading_div" v-show="!showFlag"> <!-- Loading样式自己写,不需要,直接删除即可 --> <div>Loading222...</div> </div> <div class="success_info_body" v-show="showFlag"> <div class="table_head"> <div class="tr1 tr">订单号</div> <div class="tr2 tr">项目名称</div> <div class="tr3 tr">需求方量</div> <div class="tr4 tr">预交付日期</div> <div class="tr5 tr">进度</div> </div> <div class="table_body"> <!-- tableTop随时间推移不对增减,即列表不断往上 --> <div class="table_list" :style="{top: tableTop + 'px'}"> <div class="tr_div" v-for="(item,index) in tableList" :key="index" :class="{'exception_style_tr':item.overDays>6 && item.process < 100}" > <div class="tr1 tr" :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}" >{{item.orderNo}}</div> <div class="tr2 tr" :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}" >{{item.projectName}}</div> <div class="tr3 tr" :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}" v-if="item.needVol!='-'&&item.needVol!='无法计算'" >{{Number(item.needVol).toFixed(3)}} m3</div> <div class="tr3 tr" :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}" v-else >-</div> <div class="tr4 tr" :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}" >{{item.completeDate}}</div> <div class="tr5 tr" :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}" v-if="item.process!='-'" >{{Number(item.process).toFixed(2)}} %</div> <div class="tr5 tr" :class="{'exception_style':item.overDays>6 && item.process < 100, 'notice_style':item.overDays>0 && item.overDays<7 && item.process < 100}" v-else >-</div> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { tableTimer: null, tableTop: 0, //列表向上移动的像素 tableList: [{ overDays:7, process:60, orderNo:1, projectName:"xx", needVol:30 }, { overDays:7, process:60, orderNo:2, projectName:"xx", needVol:30 }, { overDays:7, process:60, orderNo:3, projectName:"xx", needVol:30 }, { overDays:7, process:60, orderNo:4, projectName:"xx", needVol:30 }, { overDays:7, process:60, orderNo:5, projectName:"xx", needVol:30 }, { overDays:7, process:60, orderNo:6, projectName:"xx", needVol:30 }, { overDays:7, process:60, orderNo:7, projectName:"xx", needVol:30 }, { overDays:7, process:60, orderNo:8, projectName:"xx", needVol:30 }, { overDays:7, process:60, orderNo:9, projectName:"xx", needVol:30 } ], //tableList是列表的数据对象 showFlag: false, componentTimer: null, maxCanSee: 6, //maxCanSee代表可视范围内的最大完整数据条数 tableLineHeight: 45 //tableLineHeight代表列表中一行的高度 }; }, props: ["activeFactoryId"], watch: { activeFactoryId() { clearInterval(this.componentTimer); this.bsGetOrderProcessList(); this.componentTimerFun(); } }, beforeDestroy() { clearInterval(this.componentTimer); clearInterval(this.tableTimer); }, mounted() { // 模拟触发一下值变化,就可以触发watch this.activeFactoryId="aa" }, methods: { bsGetOrderProcessList() { clearInterval(this.tableTimer); this.tableTop = 0; if (this.activeFactoryId != "") { //this.showFlag = false; this.showFlag = true; this.actionFun(); // this.$ajax({ // method: "get", // url: `` //接口地址,不公开 // }) // .then(res => { // this.tableList = res.data.data; // this.showFlag = true; // this.actionFun(); // }) // .catch(function(err) { // console.log("bsGetOrderProcessList error!"); // }); } }, actionFun() { //超过6行才滚动 if (this.tableList.length > 6) { this.tableTimerFun(); } //没有超过6行就不滚动了 else { this.fillTableList(); } this.showFlag = true; }, fillTableList() { var addLength = this.maxCanSee - this.tableList.length; for (var i = 0; i < addLength; i++) { this.tableList.push({ orderNo: "-", projectName: "-", needVol: "-", completeDate: "-", process: "-" }); } }, tableTimerFun() { var count = 0; //每滚动一次,count加1 if (this.tableList.length > this.maxCanSee) { //tableList是列表的数据对象,maxCanSee代表可视范围内的最大完整数据条数 this.tableTimer = setInterval(() => { if (count < this.tableList.length - this.maxCanSee) { //如果还没滚动到最后一条数据,则列表向上移动以上的高度 this.tableTop -= this.tableLineHeight; //tableLineHeight代表列表中一行的高度 count++; //每滚动一次,count加1 } else { //如果滚动到最后一条,则恢复初始状态 count = 0; this.tableTop = 0; } }, 3000); } }, componentTimerFun() { this.componentTimer = setInterval(() => { this.bsGetOrderProcessList(); }, 3600000); } } }; </script> <style scoped> .orderProcess { width: 600px; height: 313px; } .loading_div { color: #eee; padding-top: 100px; } .table_head { width: 100%; height: 30px; line-height: 30px; background: rgba(90, 127, 200, 0.5); display: flex; color: #eee; text-align: center; font-size: 15px; } .tr1 { width: 25%; } .tr2 { width: 25%; } .tr3 { width: 18%; } .tr4 { width: 18%; } .tr5 { flex: 1; } .tr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; padding: 0 5px; text-align: center; font-size: 14px; } .table_body { width: 100%; height: 270px; overflow: hidden; position: relative; } .table_list { width: 100%; position: absolute; transition: all 0.5s; } .tr_div { width: 100%; display: flex; color: #eee; text-align: center; line-height: 45px; font-size: 13px; } .exception_style_tr { animation: exception_style_tr 0.8s linear; -moz-animation: exception_style_tr 0.8s linear; -webkit-animation: exception_style_tr 0.8s linear; -o-animation: exception_style_tr 0.8s linear; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes exception_style_tr { 0% { background: rgba(3, 145, 167, 0.1); } 50% { background: rgba(250, 4, 4, 0.15); } 100% { background: rgba(3, 145, 167, 0.1); } } @-moz-keyframes exception_style_tr { 0% { background: rgba(3, 145, 167, 0.1); } 50% { background: rgba(250, 4, 4, 0.15); } 100% { background: rgba(3, 145, 167, 0.1); } } @-webkit-keyframes exception_style_tr { 0% { background: rgba(3, 145, 167, 0.1); } 50% { background: rgba(250, 4, 4, 0.15); } 100% { background: rgba(3, 145, 167, 0.1); } } @-o-keyframes exception_style_tr { 0% { background: rgba(3, 145, 167, 0.1); } 50% { background: rgba(250, 4, 4, 0.15); } 100% { background: rgba(3, 145, 167, 0.1); } } .exception_style { font-weight: bold; animation: exception_style 0.8s linear; -moz-animation: exception_style 0.8s linear; -webkit-animation: exception_style 0.8s linear; -o-animation: exception_style 0.8s linear; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes exception_style { 0% { color: #eee; } 50% { color: #fa0404; } 100% { color: #eee; } } @-moz-keyframes exception_style { 0% { color: #eee; } 50% { color: #fa0404; } 100% { color: #eee; } } @-webkit-keyframes exception_style { 0% { color: #eee; } 50% { color: #fa0404; } 100% { color: #eee; } } @-o-keyframes exception_style { 0% { color: #eee; } 50% { color: #fa0404; } 100% { color: #eee; } } .notice_style { font-weight: bold; color: #d1ce02; } </style> ``` 原文:https://blog.csdn.net/zxczero/article/details/126104905
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}