vue实现列表自动滚动效果

1.下载插件

复制代码
npm install vue-seamless-scroll --save

2.在main.js中引入注册

复制代码
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3.在页面中使用(写一个固定的表头 el-table:show-header="status" 设置为false,自带的表头不显示)

复制代码
 <div class="table-box">
       //静态表头
      <div class="toptitle">
        <div class="item">序号</div>
        <div class="item">检测点</div>
        <div class="item">时间</div>
        <div class="item">识别项</div>
        <div class="item">结果</div>
      </div>
       //滚动组件
      <vue-seamless-scroll :data="tableData" :class-option="optionHover" class="seamless-warp">
        <el-table :data="tableData" @row-click="showRowDetail" style="width: 100%"  :show-header="status"
           :row-class-name="tableRowClassName">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="siteName" label="检测点">
            <template slot-scope="scope">
              <span>{{ scope.row.siteName ? scope.row.siteName : '---' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ts" label="时间">
            <template slot-scope="scope">
              <span>{{ scope.row.ts ? scope.row.ts : '---' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fun" label="识别项">
            <template slot-scope="scope">
              <span>{{ scope.row.fun == "valve" ? '炉门' : scope.row.fun == "rod" ? '摆臂' : '---' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="err" label="结果">
            <template slot-scope="scope">
              <span>{{ scope.row.err === 0 ? '正常' : scope.row.err === 1 ? '异常' : '---' }}</span>
            </template>
 </el-table-column>
        </el-table>
      </vue-seamless-scroll>
</div>

4.js配置滚动插件配置对象

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

5.样式

复制代码
<style lang="scss" scoped>
.right-box {
  height: 36%;
 
  .table-box {
    height: 85.2%;
    background: #051f51;
  }
 
}
 
.seamless-warp {
  height: 200px;
  overflow: hidden;
 
}
 
</style>
相关推荐
华仔啊10 分钟前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮41 分钟前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort1 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手1 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码1 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码1 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
小高0071 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴1 小时前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong1 小时前
JavaScript逆向之反制无限debugger陷阱
前端·javascript
skykun1 小时前
今天你学会JS的类型转换了吗?
javascript