top10.vue

<template>
    <div class="list-of-top10">
        <triangle>
            <slot>
                <div class="list-of-top10-title common-title">
                    <img class="icon-title" src="/images/screen/boardsDemand.png" alt="">
                    <span class="title">{{title}}</span>
                    <img class="bg" src="/images/screen/title01_bg.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">
                                <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>
            </slot>
        </triangle>
    </div>
</template>

<script>
  import triangle from '../components/slot/triangle'
  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:{triangle},
    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=scss>

</style>