vue实现列表无缝滚动

使用vue-seamless-scroll实现列表无缝滚动

直接看效果图~

ps:弄的gif有点卡,将就看~

安装

npm i vue-seamless-scroll

配置

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

源码

<template>
  <div class="scollbox">
    <vue-seamless-scroll
      :data="List"
      class="seamless-warp"
      :class-option="classOption"
    >
      <div class="DataList_top" v-for="(item, index) in List" :key="index">
        <div class="DataList_left one">{{ index + 1 }}</div>
        <div class="DataList_left two">{{ item.name }}</div>
        <div class="DataList_left three">{{ item.num }}</div>
        <div class="DataList_left four">
          <el-progress
            :percentage="item.stateNum"
            :color="item.colors"
            :show-text="false"
            :stroke-width="10"
          ></el-progress>
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      List: [
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 15,
          colors: "#ce0921",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 75,
          colors: "#ac3572",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 75,
          colors: "#bd2879",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 45,
          colors: "#ab3578",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 90,
          colors: "#6E00FF",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 75,
          colors: "#db3892",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 25,
          colors: "#6E00FF",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 75,
          colors: "#ab3926",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 75,
          colors: "#6E00FF",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 55,
          colors: "#ca3923",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 75,
          colors: "#6E00FF",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 50,
          colors: "#ec5298",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 75,
          colors: "#ed6589",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 75,
          colors: "#3092ed",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 35,
          colors: "#6E00FF",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 75,
          colors: "#80d422",
        },
        {
          name: "公共管理和社会保障",
          num: 1000,
          stateNum: 65,
          colors: "#209dce",
        },
      ],
    };
  },
  computed: {
    classOption() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 530, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        autoPlay: true,
      };
    },
  },
  methods: {},
};
</script>
 
 
<style scoped>
.seamless-warp {
  height: 35rem;
  overflow: hidden;
}
.DataList_top {
  list-style: none;
  width: 100%;
  height: 4rem;
  background-color: #4383c1;
  color: white;
  font-size: 1rem;
  display: flex;
  align-items: center;
  border: 1px solid #fff;
}
.DataList_left {
  text-align: center;
}
.one {
  width: 10%;
}
.two {
  width: 40%;
  margin-left: 1%;
}
.three {
  width: 10%;
  margin-left: 1%;
}
.four {
  width: 40%;
  margin: 0 1%;
}
/deep/ .el-progress-bar__outer {
  background-color: transparent;
}
</style>