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.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 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.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 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><trv-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);},

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