1、安装插件
使用 npm安装 npm i vueloopscroll
2、在 main.js中引入
import VueLoopScroll from 'vueloopscroll'
import 'vueloopscroll/lib/vueloopscroll.css';
Vue.use(VueLoopScroll)
源码：
<template>
<div>
<div class="scrolltop s1">
<vue-loop-scroll direction="left" :speed="20" :mouseStop="false">
<li v-for="(item,index) in list" :key="index">{{item.title}}</li>
</vue-loop-scroll>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [{
title: '11111111111111111',
}, {
title: '22222222222222222',
},{
title: '33333333333333333',
},{
title: '44444444444444444',
},{
title: '55555555555555555',
},{
title: '66666666666666666',
}, {
title: '77777777777777777',
},{
title: '88888888888888888',
},{
title: '99999999999999999',
},{
title: '1010101010101010',
},{
title: '11111111111111111',
}, {
title: '12121212121121211',
},{
title: '13131313133131331',
},{
title: '1414141414141414',
},{
title: '1515151151515151',
},{
title: '1616161611616161',
}, {
title: '1717171717171717',
},{
title: '18181818181818811',
},{
title: '1919191991191919',
},{
title: '2020202020202202',
}]
}
}
}
</script>
<style scoped>
.scrolltop{
background:#f4f4f4;
height: 30px;
line-height: 30px;
}
.scrolltop /deep/ .vue-loop-scroll {
height: 30px;
}
.s1 li{
height: 30px;
line-height:30px;
font-size: 12px;
}
</style>
网友评论