vue 基于vue-seamless-scroll实现列表滚动

果栋-web前端

已于 2023-09-07 10:23:20 修改

阅读量300

点赞数

文章标签： vue.js javascript 前端

于 2023-09-07 10:21:58 首次发布

本文链接：https://blog.csdn.net/guo_yandong/article/details/132731939

版权

首先安装vue-seamless-scroll

npm install vue-seamless-scroll --save

全局引用组件在main.js中添加如下代码

import vueSeamless from 'vue-seamless-scroll'
Vue.use(vueSeamless)

非全局在页面中引用

<vue-seamless-scroll></vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
  vueSeamlessScroll
},

应用element ui里的table组件

<el-table>
    <el-table-column label="序号" min-width="10%"></el-table-column>
    <el-table-column label="公告标题" min-width="35%"></el-table-column>
    <el-table-column label="公告类型" min-width="15%"></el-table-column>
    <el-table-column label="状态" min-width="15%"></el-table-column>
    <el-table-column label="创建时间" min-width="25%"></el-table-column>
</el-table>
<vue-seamless-scroll
     :data="noticeList"
     :class-option="seamlessScrollOption"
     style="height: 200px;overflow: hidden;">
     <el-table
        :data="noticeList"
        :show-header="false">
         <el-table-column
            align="center"
            min-width="10%"
            type="index"
            label="序号"
            width="50px">
          </el-table-column>
          <el-table-column
             min-width="35%"
             prop="noticeTitle"
             label="公告标题">
           </el-table-column>
           <el-table-column
             min-width="12%"
             prop="noticeType"
             show-overflow-tooltip
             label="公告类型">
           </el-table-column>
           <el-table-column
             min-width="12%"
             prop="status"
             show-overflow-tooltip
             label="状态">
           </el-table-column>
           <el-table-column
             min-width="25%"
             prop="createTime"
             label="创建时间">
           </el-table-column>
      </el-table>
</vue-seamless-scroll>

<script>
 export default {
  data() { 
    return { 
      noticeList:[]
    }
  },
  computed: {
    seamlessScrollOption() {
      return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    }
  }
};
</script>