vueloopscroll 公告文字循环滚动中奖记录循环滚动插件
```1、在 main.js中引入import VueLoopScroll from '../packages/index.js'Vue.use(VueLoopScroll)2、在项目中使用<vue-loop-scroll :list="list" direction="left" :speed="10"><li>滚动内容</li><li>滚动内容&
·
源码地址:https://gitee.com/sywlgzs/vueloopscroll
使用 npm安装 npm i vueloopscroll
使用方法:
1、在 main.js中引入
import VueLoopScroll from 'vueloopscroll'
import 'vueloopscroll/lib/vueloopscroll.css';
Vue.use(VueLoopScroll)
2、在项目中使用
<style scoped="scoped" lang="scss">
.scrolltop{ background:#f4f4f4; margin-top:20px;
&.s1{ li{ line-height:50px;} }
&.s2{
.vue-loop-scroll-box{height:200px;}
}
}
</style>
<template>
<div>
<div class="scrolltop">
<vue-loop-scroll direction="up" :speed="30" :index=0 :mouseStop="false">
<li v-for="(item,index) in list">{{item.title}}</li>
</vue-loop-scroll>
</div>
<div class="scrolltop s1">
<vue-loop-scroll direction="left" :speed="30" :index=1 :mouseStop="false">
<li v-for="(item,index) in list">{{item.title}}</li>
</vue-loop-scroll>
</div>
<div class="scrolltop s2">
<vue-loop-scroll direction="up" :speed="30" :index=2 :mouseStop="true">
<li v-for="(item,index) in list">{{item.title}}</li>
</vue-loop-scroll>
</div>
</div>
</template>
<script>
export default{
data(){
return{
list:[
{title:'向上滚动 134***5610'},
{title:'向上滚动 134***5612'},
{title:'向上滚动 134***5613'},
{title:'向上滚动 134***5614'},
{title:'向上滚动 134***5615'},
{title:'向上滚动 134***5616'},
{title:'向上滚动 134***5617'},
{title:'向上滚动 134***5618'},
{title:'向上滚动 134***5619'},
{title:'向上滚动 134***5615'},
]
}
}
}
</script>
参数说明:
direction 方向 [left 向左 up 向上] 默认向左
speed 滚动速度 数值越小滚动越快 默认50
index 页面引入多个时改变一下数值 例如第二个 填1
mouseStop 鼠标移入是否停止滚动 true 或 false 默认false
更多推荐
已为社区贡献4条内容
所有评论(0)