526互联

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

发布时间 2023-06-21 09:55:30作者: //唉
首先运行命令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中还有很多属性可以设置滚动样式，可以搜索查看下。