vue 大屏列表无缝滚动表格之vue-seamless-scroll

最新推荐文章于 2024-10-12 15:30:21 发布

zzw_bei

最新推荐文章于 2024-10-12 15:30:21 发布

阅读量878

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zzw_bei/article/details/131712192

版权

该代码段展示了如何在Vue项目中使用vue-seamless-scroll组件来创建一个无缝滚动的效果，显示各局、街道一年的案件统计信息，包括办理案件、退回案件和延时案件的数量。数据以列表形式呈现，动态绑定到组件上，提供了一种视觉效果良好的信息展示方式。

摘要由CSDN通过智能技术生成

npm install vue-seamless-scroll --save

<template>
  <div class="topContent">
    <dv-border-box-7 :color="['#03308B', '#012678']" background="#03308B">
      <div class="title">各局、街道一年案件统计</div>
      <div class="content">
        <div class="titleContent">
          <div class="tit">各局/街道案名称</div>
          <div class="tit">办理案件</div>
          <div class="tit">退回案件</div>
          <div class="tit">延时案件</div>
        </div>
        <vueSeamlessScroll
          :data="dataList"
          class="scroll"
          style="width: 100%"
          :class-option="classOption"
        >
          <div class="countContent" v-for="(item, i) in dataList" :key="i">
            <div class="descr">{{ item.name }}</div>
            <div class="descr">{{ item.count1 }}</div>
            <div class="descr">{{ item.count2 }}</div>
            <div class="descr">{{ item.count3 }}</div>
          </div>
        </vueSeamlessScroll>
      </div>
    </dv-border-box-7>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      dataList: [
        {
          name: "生态环境局",
          count1: "1",
          count2: "2",
          count3: "1",
        },
        {
          name: "应急管理局",
          count1: "1",
          count2: "2",
          count3: "1",
        },
        {
          name: "城市综合执法局",
          count1: "1",
          count2: "5",
          count3: "1",
        },
        {
          name: "市场监督管理局",
          count1: "0",
          count2: "2",
          count3: "1",
        },
        {
          name: "北局宅街道",
          count1: "1",
          count2: "2",
          count3: "1",
        },
        {
          name: "龙华街道",
          count1: "1",
          count2: "5",
          count3: "1",
        },
        {
          name: "市场监督管理局",
          count1: "0",
          count2: "2",
          count3: "1",
        },
        {
          name: "生态环境局",
          count1: "1",
          count2: "2",
          count3: "1",
        },
        {
          name: "应急管理局",
          count1: "1",
          count2: "2",
          count3: "1",
        },
        {
          name: "城市综合执法局",
          count1: "1",
          count2: "5",
          count3: "1",
        },
        {
          name: "市场监督管理局",
          count1: "0",
          count2: "2",
          count3: "1",
        },
        {
          name: "北局宅街道",
          count1: "1",
          count2: "2",
          count3: "1",
        },
        {
          name: "龙华街道",
          count1: "1",
          count2: "5",
          count3: "1",
        },
        {
          name: "市场监督管理局",
          count1: "0",
          count2: "2",
          count3: "1",
        },
      ],
      classOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 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)
      },
    };
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.topContent {
  margin: 20px 0 0;
  height: 500px;
  ::v-deep .dv-border-box-7 {
    padding: 0 10px;
    box-sizing: border-box;
    border: solid 3px #03308b !important;
  }
  .title {
    color: #08e8ff;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    background: linear-gradient(
      to right,
      rgba(1, 39, 121, 0.5),
      #012e82,
      rgba(1, 39, 121, 0.5)
    );
  }
  .content {
    width: 100%;
    height: 430px;
    padding: 10px;
    margin-top: 9px;
    color: #ffffff;
    box-sizing: border-box;
    background: #013785;
    overflow: hidden;
    box-shadow: 0 0 10px 3px #0465a3 inset;

    .titleContent {
      padding: 16px 0px;
      display: flex;
      justify-content: space-between;
      background: rgba(8, 232, 255, 0.6);
      font-size: 14px;
      .tit {
        width: 70px;
        text-align: center;
      }
      .tit:first-of-type {
        width: 140px;
      }
    }
    .countContent {
      display: flex;
      border-left: solid 2px rgba(255, 255, 255, 0.1);
      border-right: solid 2px rgba(255, 255, 255, 0.1);
      border-bottom: solid 2px rgba(255, 255, 255, 0.1);
      .descr {
        width: 70px;
        text-align: center;
        padding: 16px 0px;
        border-right: solid 2px rgba(255, 255, 255, 0.1);
      }

      .descr:first-of-type {
        width: 140px;
      }
      .descr:last-of-type {
        border: 0;
      }
    }
  }
  .scroll {
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
}
</style>

在这里插入图片描述