vue的无缝滚动插件vue-seamless-scroll的安装与使用
vue-seamless-scroll

1.命令行执行:

npm install vue-seamless-scroll --save

2. 在vue文件中使用：
   template 文件

    <div class="content">
      <div class="title">
        <div class="total" style="margin-right: 16px">任务总量</div>
        <div class="total">BUG总量</div>
      </div>
      <div class="task_analysis">
        <vue-scroll
          :data="gettersBugMonth"
          v-if="isScroll"
          class="seamless-warp"
          :class-option="classOption"
          :style="{ height: seamlessHeight + 'px' }"
        >
          <ul
            class="item task_analysis_ul"
            :style="{ height: seamlessUlHeight + 'px' }"
          >
            <li
              class="task_analysis_item"
              v-for="(item, index) in gettersBugMonth"
              :key="index"
            >
              <div class="task_analysis_left_wrap">
                <div
                  class="task_analysis_left"
                  :style="{ width: calcWidth(item, 'task') }"
                >
                  {{ item.untask }}
                </div>
              </div>
              <div class="task_analysis_center">{{ item.title }}</div>
              <div class="task_analysis_right_wrap">
                <div
                  class="task_analysis_right"
                  :style="{ width: calcWidth(item, 'bug') }"
                >
                  {{ item.unbug }}
                </div>
              </div>
            </li>
          </ul>
        </vue-scroll>
        <ul class="task_analysis_ul" v-else>
          <li
            class="task_analysis_item"
            v-for="(item, index) in gettersBugMonth"
            :key="index"
          >
            <div class="task_analysis_left_wrap">
              <div
                class="task_analysis_left"
                :style="{ width: calcWidth(item, 'task') }"
              >
                {{ item.untask }}
              </div>
            </div>
            <div class="task_analysis_center">{{ item.title }}</div>
            <div class="task_analysis_right_wrap">
              <div
                class="task_analysis_right"
                :style="{ width: calcWidth(item, 'bug') }"
              >
                {{ item.unbug }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

import vueScroll from "vue-seamless-scroll";
export default {
  name: "LeftMiddle",
  data() {
    return {
      isScroll: false,
    };
  },
  components: {
    vueScroll,
  },
  mounted() {
    setTimeout(() => {
      if (this.seamlessHeight > 172) {
        this.isScroll = true;
      } else {
        this.isScroll = false;
      }
    }, 1000);
  },
  computed: {
    ...mapGetters(["gettersBugMonth"]),
    classOption() {
      return {
        step: 0.5,
      };
    },
    seamlessHeight() {
      return this.gettersBugMonth.length * 38;  // 一个li的高度
    },
    seamlessUlHeight() {
      if (this.gettersBugMonth.length < Math.ceil(172 / 38)) {
        return this.seamlessHeight;
      } else {
        return (
          this.seamlessHeight - this.gettersBugMonth.length + Math.ceil(this.gettersBugMonth.length / 10)
        );
      }
    },
  },
  methods: {
    calcWidth(data, type) {
      if (type === "task") {
        let success_task = data.untask / data.taskAll;
        return success_task >= 1? 100 + "%": success_task < 0.1? "10%": success_task * 100 + "%";
      } else if (type === "bug") {
        let success_bug = data.unbug / data.bugAll;
        return success_bug >= 1? 100 + "%": success_bug < 0.1? "10%": success_bug * 100 + "%";
      }
    },
  },
};
</script>

  gettersBugMonth(state, data) {
    return state._BUG;
  },
    // 各项目当月bug
  _BUG: [
    {
      id: 1,
      title: "希望会小程序",
      untask: 30,
      taskAll: 40,
      unbug: 60,
      bugAll: 100,
    },
    {
      id: 2,
      title: "客服运营平台",
      untask: 60,
      taskAll: 50,
      unbug: 25,
      bugAll: 100,
    },
    {
      id: 3,
      title: "老带新",
      untask: 10,
      taskAll: 15,
      unbug: 20,
      bugAll: 30,
    },
    {
      id: 1,
      title: "希望会小啊打算快程序",
      untask: 30,
      taskAll: 40,
      unbug: 60,
      bugAll: 100,
    },
    {
      id: 1,
      title: "希望会小程序",
      untask: 30,
      taskAll: 40,
      unbug: 60,
      bugAll: 100,
    },
  ],

补充：> Vuescroll.js