vue使用vue-seamless-scroll自动滚动插件

标签：插件 vue 滚动 seamless item scroll

首先运行命令npm install vue-seamless-scroll --save
template：

<div class="publicNotification" @click="toDetail($event)">       <vue-seamless-scroll :class-option="publicNotificationOption" :data="publicNotification">         <div v-for="(item, index) in publicNotification" :key="index" style="line-height: 40px;cursor: pointer;">{{item.infoName}}</div>       </vue-seamless-scroll>     </div>

script：
import vueSeamlessScroll from 'vue-seamless-scroll'

components: { vueSeamlessScroll },
data() {
    return {
      publicNotification: []
    }
  },
computed: {
    publicNotificationOption() {
      return {
        limitMoveNum: 1, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        singleHeight: 40, // 单步运动停止的高度
        waitTime: 1500 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
methods: {
    toDetail(e) {
      console.log(e.target.innerHTML)
    }
}

toDetail方法写在vue-seamless-scroll中的div中可以获取到整个item对象，但是有一个bug就是第一个item点击没有反应，所以方法加在了外边，通过e.target获取。publicNotificationOption中还有很多属性可以设置滚动样式，可以搜索查看下。

标签：插件,vue,滚动,seamless,item,scroll
From： https://www.cnblogs.com/ai01/p/17494364.html