vue2 vue3 无限滚动

vue2

import vueSeamlessScroll from 'vue-seamless-scroll'  // vue2引入方式 

<vue-seamless-scroll
      class="scroll"
      :class-option="classOption"
      ref="vueSeamlessScroll"
      :data="downNumberList"
      @mousewheel.native="handleScroll">
       <div class="echars-box">
          <div class="echar-item" v-for="(item,index) in downNumberList" :key="index">
             <div class="left">
                <img  v-if="index < 3" class="ranking-img" :src="getRankingImgUrl(index)" />
                <span class="value">{{ index + 1 }}</span>
             </div>
             <div class="right">
                <div class="right-top">
                  <p class="text">{{ item.title }}</p>
                </div>
                <div class="progress-box">
                   <el-progress :format="format" :percentage="item.downNum" >
                   </el-progress>
                </div>
              </div>
          </div>
       </div>
</vue-seamless-scroll>

 computed: {
        classOption() {
            return {
                direction: 0,
                step: 0.2, // 数值越大速度滚动越快
                waitTime: 1000,
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },

 // 滚动代码
handleScroll(e) {
    // 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
    // e.deltaY是滚动的距离
    this.$refs.vueSeamlessScroll.yPos = this.$refs.vueSeamlessScroll.yPos - e.deltaY
    // 如果是正数 说明是往上滚
    if (this.$refs.vueSeamlessScroll.yPos > 0) {
       this.$refs.vueSeamlessScroll.yPos = 0
       return
    }
    // 如果yPos超过内部实际高度的一半则重新到顶部滚动
    // 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
    if (Math.abs(this.$refs.vueSeamlessScroll.yPos) >             
         this.$refs.vueSeamlessScroll.realBoxHeight / 2) {
         this.$refs.vueSeamlessScroll.yPos = 0
   }
}

 format(percentage) {
     return `${percentage}次`;
}

vue3

import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

<vue3-seamless-scroll
    :list="itemData.rankingData"
    :step="0.3"
    :hover="true"
    :limit-scroll-num="2"
    :isWatch="true"
    :wheel="true">
      <div class="echar-item" v-for="(item, index) in itemData.rankingData" :key="index">
             <div class="left" >
                 <img class="ranking-img" :src="getRankingImgUrl(index + 1)" />
                 <span class="value">{{ index + 1 }}</span>
             </div>
             <div class="right">
                  <div class="right-top">
                      <p class="text">{{item.companyName}}</p>
                         <div class="tag-box">
                            <p class="tag" v-if="item.isTop == '是'">县域龙头商贸</p>
                            <p class="tag">{{ item.typeName }}</p>
                          </div>
                  </div>
                  <div class="progress-box">
                     <el-progress :stroke-width="12" :percentage="item.percentage" >
                         <span>{{item.quarterSells}}</span>
                     </el-progress>
                  </div>
                </div>
    </div>
</vue3-seamless-scroll>   

css

.echars-box {
    /* width: 580px;
    margin-left: 15px;
    margin-top: 20px;
    height: 520px;
    border-bottom: 1px solid #00000026;; */
    margin-top: 5px;
    height: 100%;
    .echar-item {
        display: flex;
        flex-wrap: wrap;
        height: 50px;
        align-items: center;
        padding-left: 10px;
        .left {
            margin-right: 5px;
            position: relative;
            width: 30px;
            .ranking-img {
                width: 30px;
                height: 30px;
                z-index: 1;
            }
            .value {
                position: absolute;
                left: 50%;
                top: 45%;
                transform: translate(-50%, -50%);
                font-size: 10px;
            }
        }
        .right {
            flex: 1;
            .right-top {
                display: flex;
                .text {
                    font-family: SourceHanSans-Regular;
                    font-weight: 400;
                    font-size: 12px;
                    color: #000000d9;
                }
                .tag-box {
                    flex: 1;
                    display: flex;
                    margin-left: 10px;
                    .tag {
                        height: 20px;
                        border-radius: 4px;
                        padding: 0 2px;
                        display: inline-block;
                        margin-left: 3px;
                        background: #167aff17;
                        border: 1px solid #0000000f;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        font-size: 12px;
                        color: #00000073;
                    }
                    .tag1{
                        height: 20px;
                        border-radius: 4px;
                        padding: 0 2px;
                        display: inline-block;
                        margin-left: 3px;
                        background: #F6FFED;
                        border: 1px solid #D9F7BE;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        font-size: 12px;
                        color: #52C41A;
                    }
                    /* :nth-child(2n + 1 ) {
                        background: #167aff17;
                        border: 1px solid #0000000f;

                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        font-size: 12px;
                        color: #00000073;
                    }

                    :nth-child(2n + 2) {
                        background: #E6F4FF;
                        border: 1px solid #BAE0FF;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        font-size: 12px;
                        color: #1677FF;
                    } */
                }
                
            }
            .progress-box {
                margin-top: 3px;
                padding-right: 10px;
            }
        }
    }

    &> :nth-child(2n - 1) {
        background-color: #F6F8FA;
    }

    ::v-deep .el-progress__text {
        font-size: 13px !important;
    }
    
}