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

目录

• Vue 之 vue-seamless-scroll 实现简单自动无缝滚动，且添加对应点击事件的简单整理
• 一、简单介绍
• 二、安装和使用
• 三、效果图
• 四、vue-seamless-scroll 点击事件实现原理
•  五、简单实现
•  六、关键代码

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

一、简单介绍

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

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

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

vue-seamless-scroll 配置项：

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	1.1.17版本前手动切换时候需要置为false	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean
navigation	左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false	false	Boolean

操作环境：

name	description	calback 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
      }
   }
 
 
// 使用

    
  

三、效果图

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

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

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

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

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、运行显示，浏览器效果如图

 六、关键代码

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

• 绑定一个ref,
• 通过this.$refs.scroll3._cancle()方法停止滚动
• 通过 this,$ref.scroll3._startMove()方法再次启动

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