使用插件vue-seamless-scroll 完成内容持续动态

 

1、安装插件

npm install vue-seamless-scroll --save

2、项目中引入

 //单独引入
  import vueSeamlessScroll from 'vue-seamless-scroll'
  export default {
    components: { 
      vueSeamlessScroll
    },
  }
  
  //或者在main.js引入
  import scroll from 'vue-seamless-scroll'
  Vue.use(scroll)

3、页面使用

   <vue-seamless-scroll :data="tableList" :speed="60" :class-option="Option" style="height: 100%;overflow: hidden;">
            <ul  slot="default" class="scroll-list" v-for="(item, index) in tableList" :key="index" @click="handlePoliceClick(item)">
            <li>
              <img src="../../../assets/dataIcon/list.png" alt="">
              <span style="margin-left:15px;">{{ item.pushTypeName }}</span>
            </li>
            <li>
              <span>报警区域：</span>
              <span>{{ item.monitorName }}</span>
            </li>
            <li>
              <span>报警时间：</span>
              <span>{{ item.pushTime }}</span>
            </li>
            <li>
              <span>处理状态：</span>
              <span>{{ item.status == 0 ? '未处理' : '已处理' }}</span>
            </li>
          </ul>
          </vue-seamless-scroll>

  computed: {
    Option() {
    //vue-seamless-scroll参数配置
    return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum:4, // 开始无缝滚动的数据量
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) 
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) 
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }

    },
  },

 

  .table-list {
        height: calc(100% - 60px);
        margin-top: 10px;
}