vue中使用vue-seamless-scroll列表循环滚动插件

安装插件

npm install vue-seamless-scroll --save

组件内引入

import vueSeamlessScroll from "vue-seamless-scroll";

export default {
   components: {
       vueSeamlessScroll
   }
}

页面上使用，template标签下面使用

<template>

<vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="classOption">
   <div class="flex table-lie" v-for="(item,index) in listData" :key="index+item">
       <div class="flex-1 mt-1-5">{{item}}</div>
   </div>
</vue-seamless-scroll>

</template>

数据配置

data(){
       return:{
           listData:[]
       }
   },
   computed: {
classOption() {
return {
step: 0.6, // 数值越大速度滚动越快
limitMoveNum: 10, // 开始无缝滚动的数据量 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)
};
},
}

效果

vue中使用vue-seamless-scroll列表循环滚动插件相关推荐

Vue中el-table追加行后固定列滚动错位问题
Vue中el-table追加行后固定列滚动错位问题一.问题描述偶然发现一个问题,但是并没有找到解决方案,自己调试了两个多小时终于解决. 先贴出问题业务描述:在已查询完全部的符合条件的数据后,表格 ...
vue中递归组件实现多级列表
一.递归组件的概念递归组件: 递归组件简单来说在组件内使用组件本身.这个在vue的项目开发中也是比较常见的.对于一些多级的数据嵌套,如果对于每一层数据都进行for循环嵌套,那会非常繁琐,也很不方便. ...
vue中App.vue的主要作用
app.vue中不但可以当做是网站首页,也可以写所有页面中公共需要的动画或者样式.不在上面写代码也可以. app.vue是主组件,是页面入口文件,是vue页面资源的首加载项.所有的页面都是在app.v ...
html自动滚动代码,html+css+javascript实现列表循环滚动示例代码
说明:设置时间定时,在规定的时间内替换前一个节点的内容 1.关键代码:javascript: 复制代码代码如下: var dome=document.getElementById("dome ...
vue中进入详情页记住列表滚动位置keep-alive解决
一.配置路由 keepactice:true {path: '/index',name: 'index',component: index,meta: {keepalive: true // 组件是否 ...
vue中的if判断和for循环语句
if语句 <div class="vm"><div v-if="type==='A'">A</div><div v-e ...
Vue中使用andt组件a-table列表数据根据点击的表头进行升/降排序-案例
官方示例-API链接数据根据当前点击的内容进行升降排序使用步骤数据量过少,可以使用前端排序方式 //官方案例 <template><a-table :columns=" ...
vue中checkbox 样式自定义重写；循环遍历checkbox,拿到不同的v-model绑定值；及获取当前checked 状态，全选和全不选等功能。...
开始写这个功能,不得不吐槽原始的checkbox,灰色小方块的丑陋,虽说eleUI,mintUI,等各种框架的单复选框已经对其优化,但还是不想要这种.那我们就来研究一下怎么处理它. <secti ...
VUE3中 v-for指令用法，列表循环
一,v-for指令简介: v-for指令需要以 item in list形式的特殊语法,list是源数据数组, item 是数据组元素迭代的别名可以使用v-for指令对数组进行循环,示例如下: co ...

vue中使用vue-seamless-scroll列表循环滚动插件

vue中使用vue-seamless-scroll列表循环滚动插件相关推荐

最新文章

热门文章