前言：

在有无缝滚动的需求的时候我第一时间想的是轮播图，但是想弄一个列表那种的效果，轮播图就实现的就只能自己写个表头，这样用户体验不好，这里经过我自己使用，不管是兼容还是跨浏览器（版本较高）都是可以的，这里使用插件 vue-seamless-scroll来实现的

1、演示地址：入口

2、git源码地址入口

1、演示地址：入口

2、git源码地址入口

实现效果：鼠标滑入静止

实现步骤：

一、下载插件

二、在main.js文件里引用

三、封装scroll.vue

注意：1、这里有三张图片，是背景图左右两边的颜色，

2、我这里的li 清一色用的span，因为用p标签报错，未找到原因，注意

源码：

四、常用配置参数如下表：

五、更多有关资料

1、https://blog.csdn.net/qq_34448522/article/details/104387978

2、https://www.jianshu.com/p/d747dd8ba26d 这个人家里面li > div/p 我这里没有实现，只用了span

实现效果：鼠标滑入静止

实现步骤：

一、下载插件

cnpm i --s vue-seamless-scroll

二、在main.js文件里引用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

按需引入也是可以的

三、封装scroll.vue

注意：1、这里有三张图片，是背景图左右两边的颜色，

2、我这里的li 清一色用的span，因为用p标签报错，未找到原因，注意

源码：

<template><vue-seamless-scroll :data="List" class="seamless-warp"  :class-option="classOption"><ul><li class="Carousel_li" v-for="(item,index) in List"  :class="[{'pro_1':item.title=='1'},{'pro_2':item.title=='2'},{'pro_3':item.title=='3'}]"  :key="index"><span class="title" v-if="item.title=='1'">已完成</span><span class="title" v-if="item.title=='2'">进行中</span><span class="title" v-if="item.title=='3'">未开始</span><span :title="item.times"> {{item.times}}</span><span style="padding:0 5px;">:</span><span class="date" :title="item.content">{{item.content}}</span></li></ul></vue-seamless-scroll>
</template>
<script>export default {props:['List'],data () {return {name:'无缝轮播-注意只能用span'}},computed:{classOption() {return {step: .5, // 数值越大速度滚动越快// limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右// openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};},},}
</script>
<style lang="less" scoped>.seamless-warp {width:100%;height: 100%;overflow: hidden;}.Carousel_li{display: flex;padding-right:.5%;width: 100%;height:2.447916666666667vw;line-height:2.447916666666667vw;background-size: 100%!important;color:#BDF3F6;margin-bottom:0.5208333333333334vw;font-size: 0.7291666666666667vw;.title{padding: 0 1% 0 4%;width: 21%;}.ovr_h{width: 51%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}/*未开始*/.pro_1{background: url("../../assets/image/other/未开始.png") no-repeat center;.title{color:#F89D2E;}}/*进行中*/.pro_2{background: url("../../assets/image/other/进行中.png") no-repeat center;.title{color:#00FCD8;}}/*已完成*/.pro_3{background: url("../../assets/image/other/已完成.png") no-repeat center;.title{color:#3CFF45;}}
</style>

四、常用配置参数如下表：

key	description	default	val
`step`	数值越大速度滚动越快	`1`	`Number`
`limitMoveNum`	开启无缝滚动的数据量	`5`	`Number`
`hoverStop`	是否启用鼠标hover控制	`true`	`Boolean`
`direction`	方向 0 往下 1 往上 2向左 3向右	`1`	`Number`
`openTouch`	移动端开启touch滑动	`true`	`Boolean`
`singleHeight`	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	`0`	`Number`
`singleWidth`	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	`0`	`Number`
`waitTime`	单步停止等待时间(默认值1000ms)	`1000`	`Number`
`switchOffset`	左右切换按钮距离左右边界的边距(px)	`30`	`Number`
`autoPlay`	是否自动播放使用switch切换时候需要置为false	`true`	`Boolean`
`switchSingleStep`	手动单步切换step值(px)	`134`	`Number`
`switchDelay`	单步切换的动画时间(ms)	`400`	`Number`
`switchDisabledClass`	不可以点击状态的switch按钮父元素的类名	`disabled`	`String`
`isSingleRemUnit`	singleHeight and singleWidth是否开启rem度量	`false`	`Boolean`

五、更多有关资料

1、https://blog.csdn.net/qq_34448522/article/details/104387978

2、https://www.jianshu.com/p/d747dd8ba26d 这个人家里面li > div/p 我这里没有实现，只用了span

vue实现列表的无缝滚动相关推荐

HTML通知、新闻等文字列表的无缝滚动效果
这里推荐使用开源jQuery插件SuperSlide,下载链接:http://www.superslide2.com/downLoad.html 使用方法非常简单,以下为一个实例 <%@ pag ...
Vue封装公告信息无缝滚动展示
效果如图所示: 代码如下: <template><div class="container"><div id="box" ref= ...
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动，且添加对应点击事件的简单整理
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事 ...
vue 轮播组件 vue-seamless-scroll简单用法/上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能
一.vue-seamless-scroll是什么? vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样 ...
vue中实现列表无缝滚动
1.安装 npm install vue-seamless-scroll --save 2.在需要使用的组件中引入进行配置 import vueSeamlessScroll from "vu ...
vue无缝滚动的插件开发填坑分享
写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...
vue简单实现无缝滚动
效果实现思路在vue中如何复制一份列表出来呢且不能丢失绑定的事件,很简单使用slot插槽,使用两个插槽我们就拥有了两个列表 <div class="listScroll" ...
vue中使用vue-seamless-scroll插件无缝滚动
需求:使用vue-seamless-scroll插件实现列表无缝滚动,也可以添加相应的点击跳转,点击事件会存在点击失效的问题.支持上下左右无缝滚动,单步滚动停留时间,以及水平方向的手动切换. 效果图: ...
vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...

vue实现列表的无缝滚动

前言：

1、演示地址：入口

2、git源码地址入口

实现效果：鼠标滑入静止

实现步骤：

一、下载插件

二、在main.js文件里引用

三、封装scroll.vue

注意：1、这里有三张图片，是背景图左右两边的颜色，

2、我这里的li 清一色用的span，因为用p标签报错，未找到原因，注意

源码：

四、常用配置参数如下表：

五、更多有关资料

1、https://blog.csdn.net/qq_34448522/article/details/104387978

2、https://www.jianshu.com/p/d747dd8ba26d 这个人家里面li > div/p 我这里没有实现，只用了span

vue实现列表的无缝滚动相关推荐

最新文章

热门文章

vue实现列表的无缝滚动

前言：

1、演示地址：入口

2、git源码地址 入口

实现效果：鼠标滑入静止

实现步骤：

一、下载插件

二、在main.js文件里引用

三、封装scroll.vue

注意：1、这里有三张图片，是背景图左右两边的颜色，

2、我这里的li 清一色用的span，因为用p标签报错，未找到原因，注意

源码：

四、常用配置参数如下表：

五、更多有关资料

1、https://blog.csdn.net/qq_34448522/article/details/104387978

2、https://www.jianshu.com/p/d747dd8ba26d 这个人家里面li > div/p 我这里没有实现，只用了span

vue实现列表的无缝滚动相关推荐

最新文章

热门文章

2、git源码地址入口