vue-制作自动滚动效果

第一步：下载
可以查看官方地址
chenxuan0000
   

npm i vue-seamless-scroll -save

第二步：引用
 

import vueSeamlessScroll from "vue-seamless-scroll";

//注册
  components: {
   
    vueSeamlessScroll,
  },

第三步：使用

   
    //需要滚动的部分放在这里
   



 computed: {
    classOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: this.warnings.length, // 开始无缝滚动的数据量 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)
      };
    },
  },

第四步：给一个例子

 
			
				{{ item.name }}
        	
 




import vueSeamlessScroll from 'vue-seamless-scroll';

//数组
// 自动滚动数据
			warnings: [
				{
					id: 1,
					name: '李四1'
				},
				{
					id: 2,
					name: '李四2'
				},
				{
					id: 3,
					name: '李四3'
				},
				{
					id: 6,
					name: '李四4'
				},
				{
					id: 4,
					name: '李四5'
				},
				{
					id: 5,
					name: '李四6'
				}
			],
//注册
	components: {
		vueSeamlessScroll
	},


computed: {
		classOption() {
			return {
				step: 0.4, // 数值越大速度滚动越快
				limitMoveNum: this.warnings.length, // 开始无缝滚动的数据量 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)
			};
		}
	},

第五步：

 如何有点击事件 请按照下面的步骤进行

首先是在  vue-seamless-scroll  添加一个

  @click.native="handleClick($event)" 并在方法中添加
  需要再每一行 或者 循环的每一个 

  添加  

:data-id=“item.id”
:data-name=“item.name”
:data-obj=“JSON.stringify(item)”

 然后再点击的时候再去解析、它（再去做其他的操作）

   handleClick($event) {
      const all = JSON.parse($event.target.dataset.obj); //这是你每一行 添加的data-名字
       console.log(all );
    },

 


             
                
                  
                    {{ item.date | filterDateTime }}
                  
                  
                    {{ item.eventName }}
                  
                  
                    {{ item.source | filterType }}
                  
                  
                    {{ item.content }}
                  
                
              

     


    handleClick($event) {
      const headId = JSON.parse($event.target.dataset.obj);
     
    },

如果需要其他的，可以自行配置！！