vue-seamless-scroll实现跑马灯效果

1、引入方式（npm、yarn、browser）

npm

npm insatll vue-seamless-scroll --save

yarn

yarn add vue-seamless-scroll

browser

<script src="vue-seamless-scroll.min.js"></script>

2、注册组件（全局注册、单个.Vue文件局部注册）

//main.js
//1、全局注册 install
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//或者你可以自己设置全局注册的组件名，默认注册的组件是vue-seamless-scroll
Vue.use(scroll,{componentName:'scroll-seamless'})

//2、单个.Vue文件局部注册
import vueSeamlessScroll from  'vue-seamless-scroll'
	export default {
		name: 'demo',
	     components: {
	        vueSeamlessScroll
	      },
	}

3、使用方式

html

 <vueSeamlessScroll :data='demoList' :class-option="optionHover" class="warp">
				<view class="box" v-for="(item,index) in demoList" :key="index">
							<view class="date">
								<img :src="item.img" alt="">
							</view>
						</view>
			 </vueSeamlessScroll>

注意：class="wrap"必须要给此外容器样式：width、height、overflow: hidden;

js

data() {
			return {
				demoList:[{img:'/static/1.png'},
						{img:'/static/2.png'},
						{img:'/static/3.png'},
						{img:'/static/4.png'},
						{img:'/static/5.png'}],
				//
				step: 3, // 数值越大速度滚动越快
				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, 
				
			}
		},
		computed: {
		   optionHover() {
		                return {
		                step: 3, // 数值越大速度滚动越快
		                limitMoveNum: 5, // 开始无缝滚动的数据量 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

.warp{
				width: 70vw;
				 height: 70vh;
				overflow: hidden;
				.box{
					// width: 70vw;
					//  height: 70vh;
					 
				}
								
			}

注意事项：

• 1.最外层容器需要手动设置width、height、overflow:hidden

• 2.左右的无缝滚动需要给主内容区域（即默认slot插槽提供）设定合适的css width属性(否则无法正确计算实际宽度)。 也可以通过给他设置为display:flex;无需设置css width属性

• 3.step值不建议太小,不然会有卡顿效果(如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~,比如单步设置的30,step不能为4)

• 4.需要实现手动切换左右滚动的时候,必须设置autoPlay:false（1.1.17版本开始，只需要设置navigation:false）,目前不支持环路

• 5.提供了slot left-switch || right-switch可以自由定义需要的按钮样式 外层有div已经定位了位置居中,距离两边侧的距离可以通过switchOffset参数调整

• 6.当按钮到达边界位置,会自动为无法点击状态按钮加上定义的switchDisabledClass: 'disabled',可以按需配置

• 4、完整demo

 5、最后实现的效果

20230901_102336

6、vue-seamless-scroll官方链接：https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/