<template> <div class="list-of-top10"> <div class="list-of-top10-title common-title"> <div class="icon-and-title"> <img class="icon-title" src="@/assets/overview/board.png" alt=""> <span class="title">{{title}}</span> </div> <img class="bg" src="@/assets/overview/bg_title.png" alt=""> </div> <div class="list-of-body"> <ul class="body-title"> <li class="f1">排名</li> <li class="f7">展板名称</li> <li class="f2">播放量</li> </ul> <div class="body-content" id="bodyContent"> <div id="con1"> <ul class="body-item" v-for="(item,index) in list" :key="index"> <li class="f1">{{index%10 + 1}}</li> <li class="f7"> <div class="title" :title="item.name">{{item.name}}</div> </li> <li class="f2">{{item.num}}</li> </ul> </div> <div id="con2"></div> </div> </div> </div> </template> <script> export default { name: 'top10', data() { return { title:'全国2021年3月展板点播TOP10', timer:null, speed:50, box:null, con1:null, list:[ { name:'中国沦为半殖民地半封建社会', num:'11902' }, { name:'抗日战争取得伟大胜利', num:'59876' }, { name:'筹建新中国', num:'68902' }, { name:'中华人民共和国成立', num:'368902' }, { name:'伟大成就', num:'78902' }, { name:'完善和落实中国特色社会主义事业总体布局', num:'58902' }, { name:'中国特色社会主义进入新时代', num:'88902'}, { name:'开创中国特色社会主义新局面', num:'78902'}, { name:'社会主义文化强国建设迈出坚实步伐', num:'108902'}, { name:'坚决打赢脱贫攻坚战', num:'188902'}, // { name:'蒋介石背叛革命 建立独裁统治', num:'20300' }, // { name:'开辟农村包围城市武装夺取政权道路', num:'50780' }, // { name:'坚持党的基本路线不动摇', num:'68902' }, // { name:'港澳回归', num:'68902' }, // { name:'让人民群众共享改革发展成果', num:'48902'}, // { name:'“一带一路”倡议推进对外开放向纵深拓展', num:'8902'}, // { name:'生态保护与修复力度持续加大', num:'7902'}, // { name:'大力践行外交为民', num:'9902'}, ] } }, components:{}, mounted() { this.list.sort((a,b)=>{ return b.num - a.num }) this.list = [...this.list,...this.list] setTimeout(()=>{ this.initScroll() },1000) }, methods: { initScroll() { let _this = this this.box = document.getElementById("bodyContent"); this.con1 = document.getElementById("con1"); let con2 = document.getElementById("con2"); con2.innerHTML = this.con1.innerHTML; this.timer = setInterval(_this.scrollUp, _this.speed); }, scrollUp() { if (this.box.scrollTop >= this.con1.scrollHeight) { this.box.scrollTop = 0; } else{ this.box.scrollTop++; } }, Ups() { let _this = this this.timer = setInterval(_this.scrollUp, _this.speed); }, Stops() { clearInterval(this.timer); } } } </script> <style lang="less"> </style>