README.md · 神夜/VUE 循环滚动文字插件 - Gitee.com

1月18日，北京，聊聊2025如何加入技术开发？

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

文件

该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。

克隆/下载

README.md 1.90 KB

# vueloopscroll 无限循环滚动VUE插件

## Project setup

###使用

```
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

```
![Image text](https://img-blog.csdnimg.cn/20201114170025896.gif)

一键复制编辑原始数据按行查看历史

提交于 2020-11-18 16:38 . no commit message

# vueloopscroll 无限循环滚动VUE插件

## Project setup


###使用 

```
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


```
![Image text](https://img-blog.csdnimg.cn/20201114170025896.gif)

Loading...

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

1

https://gitee.com/sywlgzs/vueloopscroll.git

git@gitee.com:sywlgzs/vueloopscroll.git

sywlgzs

vueloopscroll

VUE 循环滚动文字插件

master