vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理

 更新时间:2023年01月03日 16:16:32   作者:仙魁XAN  
vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求,目前支持上下左右无缝滚动,单步滚动,及支持水平方向的手动切换功能,本节介绍,vue添加 vue-seamless-scroll实现自动无缝滚动的效果,并对应添加点击事件

Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理

一、简单介绍

Vue 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。

本节介绍,vue 中添加 vue-seamless-scroll,简单实现自动无缝滚动的效果,并对应添加点击事件 ,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。

vue-seamless-scroll 是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动,单步滚动,以及支持水平方向的手动切换功能。

vue-seamless-scroll 配置项:

keydescriptiondefaultval
step数值越大速度滚动越快1Number
limitMoveNum开启无缝滚动的数据量5Number
hoverStop是否启用鼠标hover控制trueBoolean
direction方向 0 往下 1 往上 2向左 3向右1Number
openTouch移动端开启touch滑动trueBoolean
singleHeight单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/10Number
singleWidth单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/30Number
waitTime单步停止等待时间(默认值1000ms)1000Number
switchOffset左右切换按钮距离左右边界的边距(px)30Number
autoPlay1.1.17版本前手动切换时候需要置为falsetrueBoolean
switchSingleStep手动单步切换step值(px)134Number
switchDelay单步切换的动画时间(ms)400Number
switchDisabledClass不可以点击状态的switch按钮父元素的类名disabledString
isSingleRemUnitsingleHeight and singleWidth是否开启rem度量falseBoolean
navigation左右方向的滚动是否显示控制器按钮,true的时候autoPlay自动变为falsefalseBoolean

操作环境:

namedescriptioncalback params
ScrollEnd一次滚动完成的回调事件null

操作环境

  • win 10
  • node v14.20.0
  • npm 8.5.3
  • @vue/cli 5.0.6
  • vue 2.6.14
  • vue-seamless-scroll 1.1.23

二、安装和使用

1、npm

npm install vue-seamless-scroll --save

2、yarn

yarn add vue-seamless-scroll

3、cdn

https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js

4、使用

// 全局注册
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//或者
//Vue.use(scroll,{componentName: 'scroll-seamless'})
 
 
// 局部注册
import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }
 
 
// 使用
<div id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
  </div>

三、效果图

自动无缝滚动,且点击对应的每条都会显示点中的索引,和显示标题,如图

四、vue-seamless-scroll 点击事件实现原理

1、在 vue-seamless-scroll 包一层 div ,然后添加对应点击事件获取 $event

<div  @click="handleButton($event)">

2、添加 tr 每组数据 class 和 id 标记

<tr v-for='(item, i) in listData' :key='i' class='labelIndex' :id='i'>

3、点击事件处理 event ,得到点击标记的 class,最终获得点击 id

// 处理鼠标点击到哪条,可添加跳转
			handleButton(e) {
				// let InfoAnync = JSON.parse(e.target.dataset.obj)
				// console.log(InfoAnync,' =====> InfoAnync')
				console.log(e, ' =====> e')
				console.log(e.path, ' =====> e.path')
				let length = e.path.length
				let labelIndex = -1
				for(let i=0;i < length; i++){
					if(e.path[i].className === 'labelIndex'){
						labelIndex = i;
						break
					}
				}
				if(labelIndex !== -1){
					console.log(e.path[labelIndex].innerText, ' =====> e.path[labelIndex].innerText')
					alert('labelIndex.id = ' + e.path[labelIndex].id + ',title: ' + this.listData[e.path[labelIndex].id].title)
				}else{
					alert('未找到数据,请检查')
				}
				
			}

 五、简单实现

1、首先创建一个 vue 文件,添加标题和标题栏

2、引入 vue-seamless-scroll ,使用并且传递数据,然后 v-for 添加显示数据

3、在 vue-seamless-scroll 中,添加点击事件,首先外包一个 div,添加一个点击事件

4、接着,给 tr 添加 class 和 id ,到时点击事件会根据此 class 和 id 进行对应的判断

 5、点击事件处理,通过对应 e.path[i].className 获取之前标记的 class,然后在获取到对应绑定的 id 值,最后即可通过数据列表获取到,对应的信息,即可对应进行相关点击事件的处理了

6、vue-seamless-scroll 简单optionSetting设置如下

7、vue-seamless-scroll 简单数据展示如下

8、运行显示,浏览器效果如图

 六、关键代码

<template>
	<div class="wrap-container sn-container">
		<div class="sn-content">
			<div class="sn-title">消息自动滚动播放</div>
			<div class="sn-body">
				<div class="wrap-container">
					<div class="table">
						<table border="0" cellpadding='0' cellspacing='0' class="table-header">
							<tbody>
								<tr>
									<td width='60%'>
										<span>标 题</span>
									</td>
									<td width='20%'>
										<span>日 期</span>
									</td>
									<td width='20%'>
										<span>热 度</span>
									</td>
								</tr>
							</tbody>
						</table>
						<div  @click="handleButton($event)">
							<vue-seamless-scroll :data='listData' class="seamless-warp" :class-option="optionSetting">
								<table border='0' cellpadding='0' cellspacing='0' class='item'>
									<tbody>
										<tr v-for='(item, i) in listData' :key='i' class='labelIndex' :id='i'>										
											<td width='100%' class="title">
												<span>{{item.title}}</span>
											</td>
											<td width='20%'>
												<span>{{item.date}}</span>
											</td>
											<td width='20%'>
												// 显示热度,且根据不同数值,显示不同颜色
												<span
													:class="{colorRed: item.hot > 2555,colorOrange: item.hot < 10}"
													>{{item.hot}}</span>
											</td>
										</tr>
									</tbody>
								</table>
							</vue-seamless-scroll>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
 
<script>
	import vueSeamlessScroll from 'vue-seamless-scroll'
	export default {
		name: 'seamless-scroll',
		components: {
			vueSeamlessScroll
		},
		data() {
			return {
				// 数据
				listData: [{
					title: '钱花哪了?一图带你读懂年轻人的消费观',
					date: '2020-05-05',
					hot: 2306
				}, {
					title: '“五一”假期前三天国内旅游收入超350亿元',
					date: '2020-05-02',
					hot: 5689
				}, {
					title: '滴滴、美团、哈啰交战,本地生活会是终局?',
					date: '2020-05-02',
					hot: 9
				}, {
					title: '“互联网+文化”逆势上行文娱消费云端真精彩',
					date: '2020-04-25',
					hot: 288
				}, {
					title: '乐观还是悲观?巴菲特是个现实主义者!',
					date: '2020-04-21',
					hot: 158
				}, {
					title: 'B站的后浪,会把爱优腾拍在沙滩上吗?',
					date: '2020-04-20',
					hot: 889
				}, {
					title: '华为如何做投资的:先给两亿订单一年上市',
					date: '2020-04-01',
					hot: 5800
				}, {
					title: '马斯克:特斯拉股价太高了,我要卖豪宅',
					date: '2020-03-25',
					hot: 6
				}, {
					title: '人民日报海外版:云模式巧解“就业难”',
					date: '2020-03-16',
					hot: 88
				}, {
					title: '刚刚港股"崩了":狂跌近1000点!',
					date: '2020-03-12',
					hot: 88
				}, {
					title: '个人健康信息码国家标准发布',
					date: '2020-02-28',
					hot: 5
				}, {
					title: '传软银国际裁员约10%两名管理合伙人离职',
					date: '2020-02-15',
					hot: 258
				}, {
					title: '27万个岗位:区块链、人工智能等专场招聘',
					date: '2020-02-10',
					hot: 198
				}, {
					title: '一季度电商发展势头迅猛农村电商破1300万家',
					date: '2020-02-08',
					hot: 19
				}]
			}
		},
		
		computed:{
			optionSetting(){
				return{
					step: 0.5, // 数值越大速度滚动越快
					limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
					hoverStop: true, // 是否开启鼠标悬停stop
					direction: 1, // 0向下 1向上 2向左 3向右
					autoPlay: true, // 是否自动滚动
					openWatch: true, // 开启数据实时监控刷新dom
					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
					waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
				}
			}
		},
		methods:{
			// 处理鼠标点击到哪条,可添加跳转
			handleButton(e) {
				// let InfoAnync = JSON.parse(e.target.dataset.obj)
				// console.log(InfoAnync,' =====> InfoAnync')
				console.log(e, ' =====> e')
				console.log(e.path, ' =====> e.path')
				let length = e.path.length
				let labelIndex = -1
				for(let i=0;i < length; i++){
					if(e.path[i].className === 'labelIndex'){
						labelIndex = i;
						break
					}
				}
				if(labelIndex !== -1){
					console.log(e.path[labelIndex].innerText, ' =====> e.path[labelIndex].innerText')
					alert('labelIndex.id = ' + e.path[labelIndex].id + ',title: ' + this.listData[e.path[labelIndex].id].title)
				}else{
					alert('未找到数据,请检查')
				}
				
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.sn-title{
		text-align: center;
	}
	.sn-container{
		position: absolute;
		left: 30%;
		width: 600px;
		height: 800px;
		%table-style{
			width: 100%;
			height: 35px;
			table-layout: fixed;
			tr {
				td {
					padding: 10px 5px;
					text-align: center;
					background-color: transparent;
					white-space: nowrap;
					overflow: hidden;
					color: #e200ff;
					font-size: 14px;
				}
			}
		}
		.table{
			.table-header{
				@extend %table-style;
			}
			
			.seamless-warp{
				height: 400px;
				overflow: hidden;
				visibility: visible;
				.colorRed {
					color: #FF4669;
				}
				.colorOrange {
					color: #FFC956;
				}
				.item{
					height: auto;
					@extend %table-style;
					tr{
						td{
							&.title{
								text-overflow: ellipsis;
								display: inline-block;
							}
						}
					}
				}
			}
		}
	}
</style>

以上内容到此结束,下面补充介绍vue-seamless-scroll 动态开启和关闭滚动

     <vue-seamless-scroll
        :data="threeList"
        class="warp"
        :class-option="defaultOption"
        ref="scroll3"
      >
  • 绑定一个ref,
  • 通过this.$refs.scroll3._cancle()方法停止滚动
  • 通过 this,$ref.scroll3._startMove()方法再次启动

到此这篇关于vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理的文章就介绍到这了,更多相关vue-seamless-scroll 无缝滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决

    Vue启动失败报错:Module not found: Error: Can‘t resolve &apos

    这篇文章主要给大家介绍了关于Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • 详解Vue 自定义hook 函数

    详解Vue 自定义hook 函数

    这篇文章主要介绍了详解Vue自定义hook函数,hook函数本质是一个函数,把setup函数中使用的Composition API进行了封装,更多相关内容感兴趣的朋友可以参考一下
    2022-06-06
  • vue实现左右点击滚动效果

    vue实现左右点击滚动效果

    这篇文章主要为大家详细介绍了vue实现左右点击滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue开发公共组件之返回顶部

    vue开发公共组件之返回顶部

    这篇文章主要为大家详细介绍了vue开发公共组件之返回顶部,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 你不知道的SpringBoot与Vue部署解决方案

    你不知道的SpringBoot与Vue部署解决方案

    这篇文章主要介绍了你不知道的SpringBoot与Vue部署解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue学习笔记之作用域插槽实例分析

    vue学习笔记之作用域插槽实例分析

    这篇文章主要介绍了vue学习笔记之作用域插槽,结合实例形式分析了vue.js作用域插槽基本使用方法及操作注意事项,需要的朋友可以参考下
    2020-02-02
  • 基于Vue的延迟加载插件vue-view-lazy

    基于Vue的延迟加载插件vue-view-lazy

    这篇文章主要介绍了基于Vue的延迟加载插件vue-view-lazy,可以使图片或者其他资源进入可视区域后加载,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 基于Vue3实现的图片散落效果实例

    基于Vue3实现的图片散落效果实例

    最近工作中遇到一个效果还不错,所以想着实现一下,下面这篇文章主要给大家介绍了关于如何基于Vue3实现的图片散落效果的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • VUE如何实现点击文字添加颜色(动态修改class)

    VUE如何实现点击文字添加颜色(动态修改class)

    这篇文章主要介绍了VUE如何实现点击文字添加颜色(动态修改class),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue中@路径无法跳转到指定文件的解决

    vue中@路径无法跳转到指定文件的解决

    这篇文章主要介绍了vue中@路径无法跳转到指定文件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论