博客

效果如下：

npm：

https://www.npmjs.com/package/vue-seamless-scroll?activeTab=versions

官网：

https://chenxuan0000.github.io/vue-seamless-scroll/guide/#npm

// 安装
 npm install vue-seamless-scroll --save
// 导入
import vueSeamlessScroll from "vue-seamless-scroll";
// 注册
  components: { vueSeamlessScroll },

// 使用 
<vue-seamless-scroll :data="carRankArr" class="warp">
      <ul class="item">
        <li v-for="(item, index) in carRankArr" :key="index">
          <div v-if="index === 0" class="first-bar">
            <img src="/img/cockpit/firstBar2.png" alt="" />
          </div>

          <div :class="index === 0 ? 'first-bg li-class' : 'li-class'">
            <div>
              <span
                :class="index === 0 ? 'first-font' : ''"
                style="margin: 0 10px 0 0"
              >
                {{ index + 1 }}
              </span>
              <span> {{ item.carName }} </span>
            </div>
            <span> 违规 {{ item.count }} 次 </span>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>

// 样式
.rBox3 {
  width: 100%;
  height: 100%;
  margin: auto;

  .warp {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    color: #f0f5ff;

    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;

      .li-class {
        height: 60px;
        line-height: 60px;
        padding: 0 22px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
    }
  }

  .first-bg {
    background: linear-gradient(
      to left,
      rgba(255, 213, 0, 0),
      rgba(255, 213, 0, 0.1)
    );
  }

  .first-font {
    color: #ffd500;
  }

  .first-bar {
    position: absolute;
    left: -6px;
    z-index: 9999 !important;

    img {
      width: 14px;
      height: 60px;
    }
  }
}

// 数据格式如下
  "data": [
    {
      "carId": null,
      "carName": "车辆名称2",
      "count": 2
    },
    {
      "carId": null,
      "carName": "车辆名称4",
      "count": 1
    },
    {
      "carId": null,
      "carName": "车辆名称5",
      "count": 1
    },
    {
      "carId": null,
      "carName": "车辆名称6",
      "count": 1
    },
    {
      "carId": null,
      "carName": "测试萨达是大的",
      "count": 1
    }
  ]

更多配置看官网即可