vue中实现无缝衔接的轮播效果

今天写项目的时候有一个要求，完成一个类似表格的轮播效果。

安装

npm install vue-seamless-scroll --save

引入（在需要用到的组件引入即可）

import vueSeamlessScroll from 'vue-seamless-scroll'export default {components: {vueSeamlessScroll,}

使用（html）

//:data里面传的是动态数组数据<vue-seamless-scroll:data="tableData":class-option="defaultOption"style="overflow: hidden;"><a-rowv-for="(item,index) in tableData":key="index"class="scoll-item"><a-col :span="10">{{item.account}}</a-col></a-row></vue-seamless-scroll>

配置默认值

computed:{defaultOption() {return {step: 0.5, // 数值越大速度滚动越快limitMoveNum: 2, // 开始无缝滚动的数据量 hoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)}},}

vue中实现无缝衔接的轮播效果相关推荐

Vue实现数据大屏组件轮播效果
Vue实现数据大屏组件轮播效果需求分析实现备注需求采用Vue结合Echarts制作了数据大屏,由于每个组件占用的空间较小,展示起来不够清晰,所以需要在展示大屏之后,每隔一段时间,就对各组 ...
html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
Qt实现窗口轮播效果
效果图如下: 思路是将需要轮播的窗口重载一个类,放入QStackedWidget中,通过定时器和QPushButton控制QStackedWidget中的窗口切换实现轮播效果. 重载一个窗口类命名Im ...
Vue项目中使用swiper插件开发3d轮播图
在开发过程中有3D轮播图的需求,使用vue-awesome-swiper完成先贴个效果图安装npm install swiper@5.4.5 vue-awesome-swiper -S 全局引入并 ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
vue列表滚动(无缝衔接)插件分享--超好用
vue列表滚动(无缝衔接)插件分享–超好用地址案例演示 1,下载 cnpm i vue-seamless-scroll 2,查看版本号(package.json)文件 3,在要用的组件页面引入 // ...
vue页面切换动画-类似于轮播效果、渲染列表给每一行数据加上显示动画
vue页面切换动画-类似于轮播效果 <transition :name="transitionName"><router-view/> </trans ...
Vue以CDN方式调用Swiper轮播异常
Vue以CDN方式调用Swiper轮播异常参考文章: (1)Vue以CDN方式调用Swiper轮播异常 (2)https://www.cnblogs.com/Tylerrrkd/p/9165886. ...

vue中实现无缝衔接的轮播效果

vue中实现无缝衔接的轮播效果相关推荐

最新文章

热门文章