自上而下的间隔滚动

页面中（特别是首页）中的类表格或者文档信息类的滚动使用，具体UI需要根据设计图进行代码编写，动效可直接复用。

页面中使用的js为scroll.js，以往的笔记中有记录

组件代码：

<!--* @Author: menxiaojin* @Date: 2023-05-05 15:25:31* @LastEditors: menxiaojin* @LastEditTime: 2023-05-06 17:30:27
-->
<template>
<div class="tableScrollCock"><div class="tableTitle"><div v-for="(item,index) in titleList" :key="index" :class="item.class">{{item.name}}</div></div><div class="tableContent" :id="idOutBox" :style="{height:boxHeight}"><div :id="idNeiBox"><div class="tableBox" v-for="(item,index) in list" :key="index"><div class="titleNum">{{index+1}}<span class="numOne" v-if="index==0"></span><span class="numTwo" v-if="index==1"></span><span class="numThree" v-if="index==2"></span></div><div class="titleName">{{item.partyName}}</div><div class="titleScore scoreOne" v-if="index==0">{{item.score}}</div><div class="titleScore scoreTwo" v-if="index==1">{{item.score}}</div><div class="titleScore scoreThree" v-if="index==2">{{item.score}}</div><div class="titleScore" v-if="index!=0&&index!=1&&index!=2">{{item.score}}</div></div></div></div>
</div>
</template>
<script>
import {scrollCustom} from './scroll'
export default {props:{titleList:{type:Array,default:()=>[{class:'titleNum',name:'排名'},{class:'titleName',name:'党群名称'},{class:'titleScore',name:'活力指数'}]},idOutBox:{type:String,default:'tableScroll'},idNeiBox:{type:String,default:'tabkleContent'},list:{type:Array,default:()=>[{id:'',partyName:'林家村党组织',score:2060},{id:'',partyName:'辛店街道党组织',score:2060},{id:'',partyName:'六户村党组织',score:2060},{id:'',partyName:'牛庄镇东庞社区党',score:2060},{id:'',partyName:'百华石油技术开发',score:2060},{id:'',partyName:'天水社区党组织',score:2060}]},boxHeight:{type:String,default:'175px'}},data() {return {}},created() {},methods: {},mounted() {//滚动scrollCustom(this.idOutBox, this.idNeiBox, 38, 500, 50)},
}
</script><style scoped lang="scss">
/* 活力分数排行榜 */
.tableScrollCock{margin-top: 10px;.tableTitle{width: 100%;height: 32px;display: flex;background: url('~@/assets/cockpit/tableTitle.png') no-repeat;background-size: 100% 100%;line-height: 28px;color: #AFBED8;font-size:14px;font-style: oblique;.titleNum{width: 80px;text-align: center;}.titleName{flex: 1;padding-left: 30px;}.titleScore{width: 100px;text-align: center;}}.tableContent{overflow: hidden;}.tableBox:nth-child(2n){background: url('~@/assets/cockpit/tableBg1.png') no-repeat;background-size: 100% 100%;}.tableBox{width: 100%;height: 28px;display: flex;background: url('~@/assets/cockpit/tableBg2.png') no-repeat;background-size: 100% 100%;line-height: 28px;color: #AFBED8;font-size:14px;font-style: oblique;margin-top: 10px;.titleNum{width: 80px;text-align: center;color: #FFFFFF;font-weight: 550;position: relative;z-index: 1;.numOne{width: 50px;height: 15px;// background: #FC1718;position: absolute;top:7px;left: 50%;margin-left: -25px;z-index: -1;background-image: -webkit-linear-gradient(left,rgba(252, 23, 24, 0) 0%,rgba(252, 23, 24, 0.1) 20%,rgba(252, 23, 24, 1) 50%,rgba(252, 23, 24, 0.1) 80%,rgba(252, 23, 24, 0) 100%);}.numTwo{width: 50px;height: 15px;// background: #FC1718;position: absolute;top:7px;left: 50%;margin-left: -25px;z-index: -1;background-image: -webkit-linear-gradient(left,rgba(167, 191, 212, 0) 0%,rgba(167, 191, 212, 0.1) 20%,rgba(167, 191, 212, 1) 50%,rgba(167, 191, 212, 0.1) 80%,rgba(167, 191, 212, 0) 100%);}.numThree{width: 50px;height: 15px;// background: #FC1718;position: absolute;top:7px;left: 50%;margin-left: -25px;z-index: -1;background-image: -webkit-linear-gradient(left,rgba(232, 140, 59, 0) 0%,rgba(232, 140, 59, 0.1) 20%,rgba(232, 140, 59, 1) 50%,rgba(232, 140, 59, 0.1) 80%,rgba(232, 140, 59, 0) 100%);}}.titleName{flex: 1;padding-left: 30px;}.titleScore{width: 100px;text-align: center;color: #FFFFFF;font-weight: 550;}.scoreOne{color: #FF1800;}.scoreTwo{color: #FFFC00;}.scoreThree{color: #35FFFD;}}
}
</style>