vue项目开发中,经常需要一些列表滚动效果,之前一直使用的是liMarquee,一个滚动的时候,效果还可以,多个滚动的时候总感觉有点不对,就换了一个插件
安装依赖
npm i vue-seamless-scroll --save
使用
<vue-seamless-scroll
:data="list"
:class-option="defaultOption"
class="paiming"
>
<div v-for="(item,index) in list" :key="index">
<div class="title">图书馆实时视频</div>
<div class="videos">
<img src="../../assets/tushu/shipinimg.png" alt="">
<img src="../../assets/tushu/shipinimg.png" alt="">
<img src="../../assets/tushu/shipinimg.png" alt="">
<img src="../../assets/tushu/shipinimg.png" alt="">
</div>
</div>
</vue-seamless-scroll>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: 'shipin',
components: { vueSeamlessScroll },
props: {
id: {
type: String,
default () {
return ''
}
}
},
data () {
return {
list: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null,]
}
},
computed: {
defaultOption () {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 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)
}
}
},
watch: {},
mounted () {
},
methods: {}
}
</script>