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

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

    目录

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

    一、简单介绍

    二、安装和使用

    三、效果图

    四、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

    vue-seamless-scroll 回调事件：

    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、使用

    1. // 全局注册
    2. import Vue from 'vue'
    3. import scroll from 'vue-seamless-scroll'
    4. Vue.use(scroll)
    5. //或者
    6. //Vue.use(scroll,{componentName: 'scroll-seamless'})
    7.  
    8.  
    9. // 局部注册
    10. import vueSeamless from 'vue-seamless-scroll'
    11.    export default {
    12.       components: {
    13.         vueSeamless
    14.       }
    15.    }
    16.  
    17.  
    18. // 使用
    19. "app">
    20.     <vue-seamless-scroll>vue-seamless-scroll>
    21.

    • 三、效果图

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

     

    四、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

    1. // 处理鼠标点击到哪条，可添加跳转
    2. 			handleButton(e) {
    3. 				// let InfoAnync = JSON.parse(e.target.dataset.obj)
    4. 				// console.log(InfoAnync,' =====> InfoAnync')
    5. 				console.log(e, ' =====> e')
    6. 				console.log(e.path, ' =====> e.path')
    7. 				let length = e.path.length
    8. 				let labelIndex = -1
    9. 				for(let i=0;i < length; i++){
    10. 					if(e.path[i].className === 'labelIndex'){
    11. 						labelIndex = i;
    12. 						break
    13. 					}
    14. 				}
    15. 				if(labelIndex !== -1){
    16. 					console.log(e.path[labelIndex].innerText, ' =====> e.path[labelIndex].innerText')
    17. 					alert('labelIndex.id = ' + e.path[labelIndex].id + ',title： ' + this.listData[e.path[labelIndex].id].title)
    18. 				}else{
    19. 					alert('未找到数据，请检查')
    20. 				}
    21. 				
    22. 			}

     五、简单实现

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

     六、关键代码

    1. <template>
    2. 	<div class="wrap-container sn-container">
    3. 		<div class="sn-content">
    4. 			<div class="sn-title">消息自动滚动播放div>
    5. 			<div class="sn-body">
    6. 				<div class="wrap-container">
    7. 					<div class="table">
    8. 						<table border="0" cellpadding='0' cellspacing='0' class="table-header">
    9. 							<tbody>
    10. 								<tr>
    11. 									<td width='60%'>
    12. 										<span>标 题span>
    13. 									td>
    14. 									<td width='20%'>
    15. 										<span>日 期span>
    16. 									td>
    17. 									<td width='20%'>
    18. 										<span>热 度span>
    19. 									td>
    20. 								tr>
    21. 							tbody>
    22. 						table>
    23. 						<div  @click="handleButton($event)">
    24. 							<vue-seamless-scroll :data='listData' class="seamless-warp" :class-option="optionSetting">
    25. 								<table border='0' cellpadding='0' cellspacing='0' class='item'>
    26. 									<tbody>
    27. 										<tr v-for='(item, i) in listData' :key='i' class='labelIndex' :id='i'>										
    28. 											<td width='100%' class="title">
    29. 												<span>{{item.title}}span>
    30. 											td>
    31. 											<td width='20%'>
    32. 												<span>{{item.date}}span>
    33. 											td>
    34. 											<td width='20%'>
    35. 												// 显示热度，且根据不同数值，显示不同颜色
    36. 												<span
    37. 													:class="{colorRed: item.hot > 2555,colorOrange: item.hot < 10}"
    38. 													>{{item.hot}}span>
    39. 											td>
    40. 										tr>
    41. 									tbody>
    42. 								table>
    43. 							vue-seamless-scroll>
    44. 						div>
    45. 					div>
    46. 				div>
    47. 			div>
    48. 		div>
    49. 	div>
    50. template>
    51.  
    52. <script>
    53. 	import vueSeamlessScroll from 'vue-seamless-scroll'
    54. 	export default {
    55. 		name: 'seamless-scroll',
    56. 		components: {
    57. 			vueSeamlessScroll
    58. 		},
    59. 		data() {
    60. 			return {
    61. 				// 数据
    62. 				listData: [{
    63. 					title: '钱花哪了?一图带你读懂年轻人的消费观',
    64. 					date: '2020-05-05',
    65. 					hot: 2306
    66. 				}, {
    67. 					title: '“五一”假期前三天国内旅游收入超350亿元',
    68. 					date: '2020-05-02',
    69. 					hot: 5689
    70. 				}, {
    71. 					title: '滴滴、美团、哈啰交战，本地生活会是终局？',
    72. 					date: '2020-05-02',
    73. 					hot: 9
    74. 				}, {
    75. 					title: '“互联网+文化”逆势上行文娱消费云端真精彩',
    76. 					date: '2020-04-25',
    77. 					hot: 288
    78. 				}, {
    79. 					title: '乐观还是悲观？巴菲特是个现实主义者！',
    80. 					date: '2020-04-21',
    81. 					hot: 158
    82. 				}, {
    83. 					title: 'B站的后浪，会把爱优腾拍在沙滩上吗?',
    84. 					date: '2020-04-20',
    85. 					hot: 889
    86. 				}, {
    87. 					title: '华为如何做投资的：先给两亿订单一年上市',
    88. 					date: '2020-04-01',
    89. 					hot: 5800
    90. 				}, {
    91. 					title: '马斯克：特斯拉股价太高了，我要卖豪宅',
    92. 					date: '2020-03-25',
    93. 					hot: 6
    94. 				}, {
    95. 					title: '人民日报海外版：云模式巧解“就业难”',
    96. 					date: '2020-03-16',
    97. 					hot: 88
    98. 				}, {
    99. 					title: '刚刚港股"崩了"：狂跌近1000点！',
    100. 					date: '2020-03-12',
    101. 					hot: 88
    102. 				}, {
    103. 					title: '个人健康信息码国家标准发布',
    104. 					date: '2020-02-28',
    105. 					hot: 5
    106. 				}, {
    107. 					title: '传软银国际裁员约10%两名管理合伙人离职',
    108. 					date: '2020-02-15',
    109. 					hot: 258
    110. 				}, {
    111. 					title: '27万个岗位：区块链、人工智能等专场招聘',
    112. 					date: '2020-02-10',
    113. 					hot: 198
    114. 				}, {
    115. 					title: '一季度电商发展势头迅猛农村电商破1300万家',
    116. 					date: '2020-02-08',
    117. 					hot: 19
    118. 				}]
    119. 			}
    120. 		},
    121. 		
    122. 		computed:{
    123. 			optionSetting(){
    124. 				return{
    125. 					step: 0.5, // 数值越大速度滚动越快
    126. 					limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
    127. 					hoverStop: true, // 是否开启鼠标悬停stop
    128. 					direction: 1, // 0向下 1向上 2向左 3向右
    129. 					autoPlay: true, // 是否自动滚动
    130. 					openWatch: true, // 开启数据实时监控刷新dom
    131. 					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
    132. 					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
    133. 					waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
    134. 				}
    135. 			}
    136. 		},
    137. 		methods:{
    138. 			// 处理鼠标点击到哪条，可添加跳转
    139. 			handleButton(e) {
    140. 				// let InfoAnync = JSON.parse(e.target.dataset.obj)
    141. 				// console.log(InfoAnync,' =====> InfoAnync')
    142. 				console.log(e, ' =====> e')
    143. 				console.log(e.path, ' =====> e.path')
    144. 				let length = e.path.length
    145. 				let labelIndex = -1
    146. 				for(let i=0;i < length; i++){
    147. 					if(e.path[i].className === 'labelIndex'){
    148. 						labelIndex = i;
    149. 						break
    150. 					}
    151. 				}
    152. 				if(labelIndex !== -1){
    153. 					console.log(e.path[labelIndex].innerText, ' =====> e.path[labelIndex].innerText')
    154. 					alert('labelIndex.id = ' + e.path[labelIndex].id + ',title： ' + this.listData[e.path[labelIndex].id].title)
    155. 				}else{
    156. 					alert('未找到数据，请检查')
    157. 				}
    158. 				
    159. 			}
    160. 		}
    161. 	}
    162. script>
    163.  
    164. <style lang="scss" scoped>
    165. 	.sn-title{
    166. 		text-align: center;
    167. 	}
    168. 	.sn-container{
    169. 		position: absolute;
    170. 		left: 30%;
    171. 		width: 600px;
    172. 		height: 800px;
    173. 		%table-style{
    174. 			width: 100%;
    175. 			height: 35px;
    176. 			table-layout: fixed;
    177. 			tr {
    178. 				td {
    179. 					padding: 10px 5px;
    180. 					text-align: center;
    181. 					background-color: transparent;
    182. 					white-space: nowrap;
    183. 					overflow: hidden;
    184. 					color: #e200ff;
    185. 					font-size: 14px;
    186. 				}
    187. 			}
    188. 		}
    189. 		.table{
    190. 			.table-header{
    191. 				@extend %table-style;
    192. 			}
    193. 			
    194. 			.seamless-warp{
    195. 				height: 400px;
    196. 				overflow: hidden;
    197. 				visibility: visible;
    198. 				.colorRed {
    199. 					color: #FF4669;
    200. 				}
    201. 				.colorOrange {
    202. 					color: #FFC956;
    203. 				}
    204. 				.item{
    205. 					height: auto;
    206. 					@extend %table-style;
    207. 					tr{
    208. 						td{
    209. 							&.title{
    210. 								text-overflow: ellipsis;
    211. 								display: inline-block;
    212. 							}
    213. 						}
    214. 					}
    215. 				}
    216. 			}
    217. 		}
    218. 	}
    219. style>

  • 相关阅读:
    Java21 + SpringBoot3使用Spring Security时如何在子线程中获取到认证信息
    hdu 1528-Card Game Cheater(贪心算法)
    JavaScript变量预解析和函数预解析
    PCL点云处理(008)-euc_cluster
    VUE项目中调用高德地图
    20个.NET/.NET Core 优秀项目框架
    python基础面试题
    前端开发需要会什么？先掌握这三大核心关键技术
    使用低代码平台打造办公平台优势在哪里？
    什么是交互设计？大神总结
  • 原文地址：https://blog.csdn.net/u014361280/article/details/126171868