【记录】列表自动滚动轮播功能实现

效果展示

代码

<!-- 首页 -->
<template>
  <div class="page_body_item_body" @mouseenter="stopScroll" @mouseleave="scroll(false)">
    <ele-table
      class="eleTable"
      :table-options="options"
      :columns-options="columns"
      :show-fixed-control="false"
      :show-pagination="false"
    />
  </div>
</template>

<script>
import { pageVoiceAlertByJh } from '@/api/video-api.js'

export default {
  name: 'Home',
  components: {},

  data() {
    return {
      tableData: [],
      tableMaxHeight: 400,
      tableScrollTimer: null
    }
  },

  computed: {
    options() {
      return {
        data: this.tableData || [],
        maxHeight: this.tableMaxHeight
      }
    },
    columns() {
      return [
        {
          type: 'index',
          label: '序号'
        },
        {
          prop: 'xm',
          label: '警员姓名',
          'show-overflow-tooltip': true
        },
        {
          prop: 'jh',
          label: '警号',
          'show-overflow-tooltip': true
        },
        {
          prop: 'bmmc',
          label: '所在单位',
          'show-overflow-tooltip': true
        },
        {
          prop: 'zfycCount',
          label: '执法异常',
          'show-overflow-tooltip': true
        },
        {
          prop: 'sgycCount',
          label: '事故处理异常',
          'show-overflow-tooltip': true,
          minWidth: 100
        },
        {
          prop: 'sumCount',
          label: '总异常',
          'show-overflow-tooltip': true
        }
      ]
    }
  },

  created() {
    this.pageVoiceAlertByJh()
  },

  mounted() {
    this.$nextTick(() => {
      this.tableMaxHeight = this.getTableHeight()
    })
    window.addEventListener('resize', () => {
      this.tableMaxHeight = this.getTableHeight()
    })
  },

  methods: {
    pageVoiceAlertByJh() {
      pageVoiceAlertByJh({
        kssj: '2024-01-01',
        jssj: '2024-12-01'
      }).then((res) => {
        this.$common.CheckCode(res, null, () => {
          this.tableData = res.data?.rows || []

          this.$nextTick(() => {
            this.scroll(true)
          })
        })
      })
    },

	// 列表停止滚动
    stopScroll() {
      clearInterval(this.tableScrollTimer)
      this.tableScrollTimer = null
    },
	
	// 列表开始滚动
    scroll(isFetchData = false) {
      this.stopScroll()

      const body_content = document.querySelector('.el-table__body-wrapper')
      const body_content_heigh = body_content?.offsetHeight
      const body = document.querySelector('.el-table__body')
      const body_heigh = body?.offsetHeight
      isFetchData && (body_content.scrollTop = 0)

	  // 判断列表的高度是否高于列表父盒子的高度
      if (body_heigh > body_content_heigh) {
        const cha = body_heigh - body_content_heigh
        this.tableScrollTimer = setInterval(() => {
          if (body_content.scrollTop >= cha) {
            body_content.scrollTop = 0
          } else body_content.scrollTop += 1
        }, 50)
      }
    },

    // 获取 table 最大高度
    getTableHeight() {
      const tableContainer = document.querySelector('.table')
      const tableHeader = document.querySelector('.table page_body_item_header')
      const tableContainerHeight = (tableContainer && tableContainer.offsetHeight) || 0
      const tableHeaderHeight = (tableHeader && tableHeader.offsetHeight) || 0
      // return tableContainerHeight - tableHeaderHeight - 50 - 34
      return tableContainerHeight - tableHeaderHeight - 50 - 2
    }
  }
}
</script>

<style lang='scss' scoped>
</style>