首先运行命令npm install vue-seamless-scroll --save<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>
template:
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