vue 无限滚动插件 vue-seamless-scroll

1.安装

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

**

2.页面注册使用

**

javascript 复制代码
//页面
//注:tablesRow 为 overflow hidden
 <div class="tablesRow">
     <vue-seamless-scroll :data="study2table"  :class-option="classOption1">
       //下边是要滚动的内容
        <el-row class="box" v-for="(item,index) in study2table" :key="index">
             <el-col :span="8"><div class="grid-content bg-purple-dark">{{index+1}}</div></el-col>
             <el-col :span="8"><div class="grid-content bg-purple-dark">{{item.userName?item.userName:"游客"}}</div></el-col>
             <el-col :span="8"><div class="grid-content bg-purple-dark">{{item.learningCount?item.learningCount :0}}</div></el-col>
         </el-row>
    </vue-seamless-scroll>
</div>
//引入
import vueSeamlessScroll from 'vue-seamless-scroll'
//注册
 components: {
    vueSeamlessScroll
 },
 //调用
  computed:{
    classOption1 () {//滚动的参数
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 33, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
相关推荐
我叫汪枫10 分钟前
前端物理引擎库推荐 - 让你的网页动起来!
前端
百思可瑞教育1 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
雾恋5 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊5 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A5 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理6 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人6 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥307 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
IT古董7 小时前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
解道Jdon7 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs