vueloopscroll 公告文字循环滚动中奖记录循环滚动插件

源码地址：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

vueloopscroll 公告文字循环滚动中奖记录循环滚动插件相关推荐

android中奖名单轮播,iOS模拟中奖名单循环滚动效果
本文实例为大家分享了iOS模拟中奖名单循环滚动效果的具体代码,供大家参考,具体内容如下 1.动态效果图: 2.思路: (1)控件:一个父View,依次添加两个tableVew,使其上下紧挨着,高度均等 ...
python|利用打飞机小游戏学习分支和循环|今天是记录自己学习的第四天呀！加油！
** python|利用打飞机小游戏学习分支和循环|今天是记录自己学习的第四天呀!加油! ** /*** Author:Jiang Zhiying Data:2017.11.11 Emial:1443 ...
python循环输入姓名并打印_python基础循环的学习记录
一.while循环如果条件成立(true),重复执行相同操作,条件不符合,跳出循环 while 循环条件: 循环操作 (1)while循环示例例:输入王晓明5门课程的考试成绩,计算平均成绩i=1 ...
创建一个简单的应用程序窗口，显示“欲穷千里目更上一层楼”。这一行文字从窗口中向左滚动显示，而且每显示一轮，改变一次颜色，改变一次字体，一个周期为4种颜色，分别为红、绿、黄、蓝，四种字体分别为宋体、楷
创建一个简单的应用程序窗口,显示"欲穷千里目更上一层楼".这一行文字从窗口中向左滚动显示,而且每显示一轮,改变一次颜色,改变一次字体,一个周期为4种颜色,分别为红.绿.黄.蓝,四 ...
Effective Java之for-each循环优先于for循环(四十六)
for循环的缺点: 对于for循环遍历,我们很容易出现这样的一些低级错误: 对于数组 for(int i = 0 ; i >100 ; i++) for(int i = 100 ; i > ...
shell脚本详解（四）——循环语句之while循环和until循环（附加例题及解析）
shell脚本详解(四)--循环语句之while循环和until循环一.until循环 1.循环结构 2.例题二.while循环 1.循环结构 2.例题(每个人的思路不同,会导致脚本内容不一样,这 ...
c语言程序循环,C语言程序设计-循环例子
<C语言程序设计-循环例子>由会员分享,可在线阅读,更多相关<C语言程序设计-循环例子(28页珍藏版)>请在人人文库网上搜索. 1.C 语言程序设计基础篇,第 7 章简单程序 ...
oracle or 循环查询,Oracle的循环和Corsor
OR REPLACE TRIGGER trg_test before update ON cm_bogie_inandoutreport DECLARE //定义游标,查找表里边的每一列的值 curs ...
不懂就问，Spring 是如何判定原型循环依赖和构造方法循环依赖的？
作者:青石路 cnblogs.com/youzhibing/p/14514823.html 写在前面 Spring 中常见的循环依赖有 3 种:单例 setter 循环依赖.单例构造方法循环依赖.原型 ...

vueloopscroll 公告文字循环滚动中奖记录循环滚动插件

vueloopscroll 公告文字循环滚动中奖记录循环滚动插件相关推荐

最新文章

热门文章