vue 使用el-table 循环轮播数据列表

因为是在内网开发,安装插件导包进去非常麻烦,有条件的可以去下载插件实现,咱这里贴一下手撸的代码。


需要实现的效果大抵如下:(手机拍的,有些糊)

大部分实现的是监听是否到了div的底部,如果到了底部,就直接跳到顶部,这种体验感不是特别好,没有达到轮播的真正效果。


表格数据,devData我绑定了个空数组,因为实在是懒得敲了,按道理排名也应该是从api获取,而不是拿index。

<template>
  <div>
    <el-table
      :data="devData"
      style="width: 100%">
      <el-table-column label="排名">
        <template slot-scope="scope">
          <span>第{
         
  {scope.$index +1}}名</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="scale"
        label="姓名">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
 export defalut {
  dsta() {
    return {
     devData: []
    }
  }
}
</script>
export default{
   created() {
      var isScroll = true // 也可以定义到data里
      this.$nextTick(() => {
        let div = document.getElementsByClassName(el-table__body-wrapper)[0]
        div.style.height = 110px
        div.addEventListener(mouseenter, () => {
         isScroll = false
        })
        div.addEventListener(mouseleave, () => {
         idScroll = true
        })
        let t = document.getElementsByClassName(el-table__body)[0]
        setInterval(() =>{
           if(isScroll) {
             let data = this.devData[0]
             setTimeout(() => {
                this.devData.push(data)
                t.style.transition = all .5s
                t.style.marginTop = -41px
               }, 500)
             setTimeout(() =>{
               this.devData.splice(0,1)
               t.style.transition = all 0s ease 0s
               t.style.marginTop = 0
             }, 1000)
           }
         }, 2500)
       })
     }
  }

总结

经验分享 程序员 微信小程序 职场和发展