vue-制作自动滚动效果

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

npm i vue-seamless-scroll -save

第二步：引用
 

import vueSeamlessScroll from "vue-seamless-scroll";

//注册
  components: {
   
    vueSeamlessScroll,
  },

第三步：使用

   <vue-seamless-scroll :data="warnings" :class-option="classOption">
    //需要滚动的部分放在这里
   </vue-seamless-scroll>



 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 :data="warnings" :class-option="classOption">
			<view class="" v-for="(item, index) in warnings" :key="item.id">
				{{ item.name }}
        	</view>
 </vue-seamless-scroll>




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 );
    },

 <vue-seamless-scroll
            :data="warnings"
//添加这个属性 
            @click.native="handleClick($event)"
            :class-option="classOption"
          >


             <tbody>
                <tr
                  v-for="(item, index) in warnings"
                  :key="index"
                   
                
                >
                  <td :data-obj="JSON.stringify(item)" class="events1">
                    {{ item.date | filterDateTime }}
                  </td>
                  <td
                    :data-obj="JSON.stringify(item)"
                    :title="item.eventName"
                    class="events"
                  >
                    {{ item.eventName }}
                  </td>
                  <td :data-obj="JSON.stringify(item)" class="events1">
                    {{ item.source | filterType }}
                  </td>
                  <td :data-obj="JSON.stringify(item)" class="events1">
                    {{ item.content }}
                  </td>
                </tr>
              </tbody>

     </vue-seamless-scroll>


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

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