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)
      

      使用组件

                  
      
                    
                      序号
                      许可证
                      影响应用数
                      风险等级
                    
                    
                      
                      
                    
                  
      

      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使用vue-seamless-scroll+Div

      全局使用与五相同

      具体代码如下：

      					
      							
      
      								
      									
      										
      
      											成功
      										
      									
      									
      										
      {{ item.userName }},{{item.keyType }}
      									
      								
      							
      						
      

      效果图：

      

      详情参考：

      Vue3无缝滚动----vue3-seamless-scroll