Vue大屏开发系列—列表无缝滚动vue-seamless-scroll

在项目中经常会遇到了大屏滚动的问题，那么一起看下如何实现吧，

vue-seamless-scroll 是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

官方文档：06 - 单步停顿 | vue-seamless-scroll

记录下我的业务场景是动态的table表格，表头和内容数据都是后端接口返回，超出指定行例如10条数据后就滚动展示（行数可配置）。为了解决表头会跟着一起滚动，所以表格要拆成2个，一个是展示表头把table内筒主体隐藏，一个是展示表格主体内容表头隐藏（且用vue-seamless-scroll包住即可），这里一定要注意下，话不多说直接上代码

第一步安装：

npm install vue-seamless-scroll --save

yarn add vue-seamless-scroll

第二步使用：

1）页面结构

<div class="scroll_table">
      <el-table 
        :data="tableData" 
        fit
        class="table"
        :row-class-name="tableRowClassName"
        :header-row-class-name="tableRowClassName"
        border
      >
        <el-table-column
          v-for="(item,index) in tableColumn"
          :key="index+'i'"
          align="center"
          :label="item.propName"
          :prop="item.prop"
        />
      </el-table>
      <div class="scroll-container" @touchmove.prevent>
        <vue-seamless-scroll
          :data="tableData"
          class="seamless-warp"
          style="width: 100%"
          :class-option="classOption"
          :delay="5000"
        >
          <el-table 
            :data="tableData" 
            class="table_scroll"
            v-loading="loading"
            fit
            :row-class-name="tableRowClassName"
            :header-row-class-name="tableRowClassName"
            ref="scrollTable"
            border
          >
            <el-table-column 
              :label="item.propName" 
              :property="item.prop" 
              v-for="item in tableColumn" 
              :key="item.prop" 
              align="center"
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <template v-if='scope.column.property == "room"'>
                    <span class="blod-text">{{ scope.row.room }}</span><br/>
                    <span>({{ scope.row.doctorName }})</span>
                </template>
                <template v-else-if='scope.column.property == "waitList"'>
                  <marquee :scrollamount="2" scrolldelay="90" v-if="scope.row.waitList.length > 3">
                    <span class="name-con" v-for="(pre,index) in scope.row.waitList" :key="index">{{ pre }}</span>
                  </marquee>
                  <p v-else>
                    <span class="name-con" v-for="(pre,index) in scope.row.waitList" :key="index">{{ pre }}</span>
                  </p>
                </template>
                <template v-else-if='scope.column.property == "number"'>
                    <span class="blod-text">{{ scope.row.number }} 人</span>
                </template>
                <template v-else>
                  <span class="blod-text">{{ scope.row[scope.column.property] }}</span>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </vue-seamless-scroll>
      </div>
    </div>

import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: 'Screen',
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      tableColumn:[],//表格表头数据
      tableData:[],//表格数据列表
      scrollHeigth:'',//每次滚动的高度-table的可视区
    }
  },
  computed: {
    classOption () {//大屏滚动配置参数
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: this.scrollHeigth, //单步运动停止的高度(默认值0是无缝不停止的滚动) 一行的高度
        waitTime: 10000 // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  mounted(){
    this.$nextTick(()=>{
      const table = this.$refs.scrollTable
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.scrollHeigth = divData.clientHeight
      this.getList() //根据自己需要改成接口返回的数据即可
    })
  },
  methods: {
   // 表单样式
    tableRowClassName(){
      return 'blue'
    },
// 获取客户列表数据
    async getList() {
        //表头
        this.tableColumn = [
          {
            propName:'诊室+医生',
            property:'room',
            prop:'room',
          },
          {
            propName:'当前就诊',
            property:'currentVisit',
            prop:'currentVisit'
          },
          {
            propName:'下一位',
            property:'nextOne',
            prop:'nextOne',
          },
          {
            propName:'等待就诊',
            property:'waitList',
            prop:'waitList'
          },
          {
            propName:'等待人数',
            property:'number',
            prop:'number',
          }
        ]
        //表格内容
        this.tableData = [
          {
            room: '2诊室',
            doctorName:'陆琴',
            currentVisit: '陆云',
            nextOne: '张伟',
            waitList: ['华晨新','张韵芸','王越楠'],
            number:8,
          },
          {
            room: '1诊室',
            doctorName:'张玉香',
            currentVisit: '二狗',
            nextOne: '三宝',
            waitList: ['张三','张韵芸','沈韵明'],
            number:4,
          },
          {
            room: '3诊室',
            doctorName:'张玉香',
            currentVisit: '二狗',
            nextOne: '三宝',
            waitList: ['张三','张韵芸','沈韵明'],
            number:4,
          },
          {
            room: '4诊室',
            doctorName:'陆琴',
            currentVisit: '陆云',
            nextOne: '张伟',
            waitList: ['张韵芸','李芸萨','顾明磊','张韵芸'],
            number:8,
          },
          {
            room: '5诊室',
            doctorName:'张玉香',
            currentVisit: '二狗',
            nextOne: '三宝',
            waitList: ['张三','张韵芸','沈韵明'],
            number:4,
          },
          {
            room: '6诊室',
            doctorName:'陆琴',
            currentVisit: '陆云',
            nextOne: '张伟',
            waitList: ['李芸萨','顾明磊','华晨新'],
            number:8,
          },
          {
            room: '7诊室',
            doctorName:'张玉香',
            currentVisit: '二狗',
            nextOne: '三宝',
            waitList: ['张韵芸'],
            number:4,
          },
          {
            room: '8诊室',
            doctorName:'陆琴',
            currentVisit: '陆云',
            nextOne: '张伟',
            waitList: ['华晨新','王越楠'],
            number:8,
          }
        ];
    },
  }
}

<style>
/* 去掉表单背景色 */
.el-table,.el-table th{
  background: transparent !important;
  color: #FFF;
}
.el-table .blue{
  background: transparent !important;
}

/* 数据的第一条高亮 */
.el-table tbody .blue:first-child{
    color: rgb(245, 200, 144);
    background: transparent !important;
    font-weight: 700;
}
/* 点击不变色 */
.el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: transparent !important;
}
.table .el-table__header-wrapper {
    display: block !important;
  }
.table .el-table__body-wrapper {
  display: none !important;
}
/* 重点注意这段样式 */
.seamless-warp {
  height: calc(100vh - 72px);
  overflow: hidden;
}
.table_scroll .el-table__header-wrapper {
  display: none !important;
}
.scroll_table {
  height: calc(100vh - 50px);
  overflow: hidden;
}
</style>

注意：

1）classOption 就是配置滚动的参数的，不懂的话，可以看下vue-seamless-scroll官方文档哈

2）this.getList() //我这里是先写的假数据，后期根据自己需要改成接口返回的数据即可

3）样式根据自己需要去修改，很多table样式需要覆盖，还没好好整理，不要学我，你认真整理下哈

结语：动态表格需要注意下配置，如果不是接口返回的动态表格，就不需要像我这么麻烦，直接用<vue-seamless-scroll></vue-seamless-scroll>包裹table即可

希望文章对你有所帮助，看到这里也感谢你宝贵的时间，拜拜