vue-seamless-scroll无缝滚动组件使用方法详解

本文实例为大家分享了vue无缝滚动组件vue-seamless-scroll的具体实现代码，供大家参考，具体内容如下

下载

 	cnpm i -S vue-seamless-scroll

main.js中引入：

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

使用：

 	<template>
 	     <div>
 	     <vue-seamless-scroll
 	     :data="listData"
 	     :class-option="seamlessScrollOption"
 	     style="
 	         border: 1px solid white;
 	         height: 200px;
 	         overflow: hidden;
 	         width: 200px;
 	         color: white;
 	         font-size: 18px;
 	         text-align: center;
 	     "
 	     >
 	     <ul>
 	         <li
 	         v-for="(item, index) in listData"
 	         :key="index"
 	         style="padding: 10px; margin: 5px"
 	         >
 	         <span class="title">{{ item.title }}：</span
 	         ><span class="date">{{ item.time }}</span>
 	         </li>
 	     </ul>
 	     </vue-seamless-scroll>
 	     </div>
 	</template>
 	 
 	<script>
 	 
 	export default {
 	     props: {},
 	     data() {
 	     return {
 	     listData: [
 	     {
 	         title: "张三",
 	         time: "2021-08-09",
 	     },
 	     {
 	         title: "李四",
 	         time: "2021-08-09",
 	     },
 	     {
 	         title: "王五",
 	         time: "2021-08-09",
 	     },
 	     {
 	         title: "赵六",
 	         time: "2021-08-09",
 	     },
 	     {
 	         title: "前七",
 	         time: "2021-08-09",
 	     },
 	     {
 	         title: "孙八",
 	         time: "2021-08-09",
 	     },
 	     ],
 	     };
 	     },
 	     computed: {
 	     seamlessScrollOption() {
 	     return {
 	     step: 0.2, // 数值越大速度滚动越快
 	     limitMoveNum: 2, // 开始无缝滚动的数据量 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)
 	     };
 	     },
 	     },
 	};
 	</script>

效果图2：

 	computed: {
 	     seamlessScrollOption() {
 	     return {
 	     step: 0.5, // 数值越大速度滚动越快
 	     hoverStop: true, // 是否开启鼠标悬停stop
 	     direction: 0, // 0向下 1向上 2向左 3向右
 	     openWatch: true, // 开启数据实时监控刷新dom
 	     singleHeight: 40, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
 	     singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
 	     waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
 	     };
 	     },
 	     },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。