vue-seamless-scroll滚动

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

前言

案例

目标效果：

固定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)

使用组件

            <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>

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)
      }
    }
  },

CSS

.scroll-font {
  margin-left: 30px;
  margin-right: 60px;
}

.seamless-warp {
  height: 300px;
  overflow: hidden;
}

三、案例

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)

具体代码如下：

						<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>

效果图：

六、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>

效果图：

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