列表轮询

npm install 安装vue-seamless-scroll

html部分：

<div class="rightImg">
  <div class="setTop">
    <vue-seamless-scroll :data="eventShow" class="seamless-warp">
      <ul class="content">
        <li v-for="(item,index) in eventShow" ref="con2" :key="index" class="listTop">
          <div class="forastTitle">
            <div><i class="el-icon-menu"/>{{ item.river.riverName }}</div>
            <div><i class="el-icon-s-custom"/>{{ item.user.realName }}</div>
            <!-- <div><i class="el-icon-time"></i>{{item.startTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</div> -->
          </div>
          <div><i class="el-icon-caret-right"/>巡林时间：<i class="el-icon-time"/>{{ item.startTime |
          parseTime('{y}-{m}-{d} {h}:{i}:{s}') }} 至 <i class="el-icon-time"/>{{ item.endTime |
          parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
          </div>
          <div class="type"><i class="el-icon-caret-right"/>步数：{{ item.stepNumber }}</div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</div>

css部分：

.rightImg {
  width: 34%;
  height: 200%;
}
.setTop {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  background-image: url('[email protected]/assets/img/zhishu.png');
  background-size: 100% 100% !important;

}

.setTable {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.seamless-warp {
  height: 100%;
  padding: 0 20px;
  overflow: hidden;
}

js部分：

// 导入请求接口

import { patrolListTwenty } from '@/api/index'

data() {
  return {
    number: {},
    animate: false,
    eventShow: [
      {
        'user': {
          'realName': ''
        },
        'river': {
          'riverName': ''
        },
        'startTime': '',
        'stepNumber': ''
      }

    ],
    tableData: []
  }
},

mounted（） {
this.patrolListTwenty()
}，

methods: {
// 请求数据
  patrolListTwenty() {
    patrolListTwenty().then(res => {
      console.log('3333', res)
      this.eventShow = []
      console.log(res)
      this.eventShow = res.data.data
    })
  }
}