vue-seamless-scroll滚动

vue-seamless-scroll使用-table表格滚动

文章目录

• vue-seamless-scroll使用-table表格滚动
• • 前言
  • 案例
  • • 目标效果：
    • 一、安装
    • 二、使用
    • 三、案例
    • 四、官网介绍
    • 五、VUE3使用vue-seamless-scroll+Table
    • 六、VUE3使用vue-seamless-scroll+Div

前言

案例

目标效果：

固定table的表头，让表格内容自行滚动
效果演示：
vue-seamless-scroll使用-table表格滚动

一、安装

NPM

npm install vue-seamless-scroll --save

Yarn

yarn add vue-seamless-scroll

二、使用

main.js

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

• 1
• 2
• 3

使用组件

<div style="display: inline-block; width: 100%"> <a-row gutter="16" style="margin-bottom: 10px"> <a-col offset="1" span="5">序号</a-col> <a-col offset="1" span="5">许可证</a-col> <a-col offset="1" span="5">影响应用数</a-col> <a-col offset="1" span="5">风险等级</a-col> </a-row> <vue-seamless-scroll :class-option="defaultOption" :data="dataSource" class="seamless-warp" style="width: 100%"> <a-table :columns="columns" :dataSource="dataSource" :loading="loading" :pagination="false" :rowKey="(record, index) => { return index }" :showHeader='false' class="bottom" style="width: 100%" > </a-table> </vue-seamless-scroll> </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

computed：

computed: { defaultOption() { return { step: 0.2,//数值越大速度滚动越快 limitMoveNum: 1, // 开始无缝滚动的数据量 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) } } },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

CSS

.scroll-font { margin-left: 30px; margin-right: 60px; } .seamless-warp { height: 300px; overflow: hidden; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

三、案例

vue-seamless-scroll 使用

四、官网介绍

vue-seamless-scroll

五、VUE3使用vue-seamless-scroll+Table

VUE3使用该组件时，需要重新下载对应的VUE3组件，数据绑定变为了list，确认是否悬停，变为了hover-stop="true"和hover=“true”，具体如下：

下载安装：

npm install vue3-seamless-scroll --save

全局使用：

import vue3SeamlessScroll from "vue3-seamless-scroll"; const app = createApp(App) app.use(vue3SeamlessScroll)

• 1
• 2
• 3

具体代码如下：

<vue3-seamless-scroll :list="datas" hover-stop="true" hover="true" step="0.3" class="seamless-warp" style="width: 100%;"> <a-table :columns="columns" :data-source="datas" :loading="loading" :pagination="false" :showHeader='false' class="bottom" style="width: 100%" > a-table> vue3-seamless-scroll>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

效果图：

六、VUE3使用vue-seamless-scroll+Div

全局使用与五相同
具体代码如下：

<vue3-seamless-scroll :hover="true" :hover-stop="true" :list="warningInfo" :step="0.3" class="seamless-warp" style="width: 100%;"> <div v-for="(item, index) in warningInfo" :key="index" class="item" style="padding: 10px; margin: 5px; font-size: 14px"> <a-row> <a-col span="4"> <div v-if="item.result == '成功'"> <a-tag color="success">成功a-tag> div> a-col> <a-col offset="1" span="19"> <div>{{ item.userName }},{{item.keyType }}div> a-col> a-row> div> vue3-seamless-scroll>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

效果图：

详情参考：
Vue3无缝滚动----vue3-seamless-scroll