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）页面结构

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,
          }
        ];
    },
  }
}

注意：

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

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

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

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

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