手把手教你写Js日期时间选择器(3)-让控件滑动起来
2016-08-13 09:21
471 查看
本节为大家讲解怎么让控件滑动起来,这里需要用到一个第三方库IScroll.js.
先奉上链接地址:
IScroll github
IScroll 网站
IScroll不只有滑动功能,还有缩放,平移等功能,具体看文档撒.
IScroll的动画效果也有很多bounce, elastic, back…等等,以及自定义事件onbeforescrollstart,onscrollstart,onscroll,onscrollend….
艾玛.真难编,免(zi)得(ji)把(qu)大(kan)家(wen)误(dang)导(ba)了.
首先我们为要滑动的div添加一个id.
创建一个IScroll,直接new.
其中#scroll-item为要滑动div的id,bounceEasing为滑动效果,bounceTime为时间,可自行调整.
现在我们的控件就可以滑动了.
但是接下来在浏览器上面却发现卧槽,滑不动啊,是不是在逗我.
不要着急,现在我们滑动列表里面正好只有5个..5个..;5*40=200px;还没超出范围当然滑不动.让我们多复制几个列表项就可以了(WebStorm按住ctrl+d).
就像下面这样.
然后再去滑动,是不是就可以了呢.
好了现在我们的控件已经可以滑动起来啦.
但是有没有发现最后面两项和最前面两项是不是怎么拉都拉不出来?
淡定,淡定.
使出我们的终极大招:
对,你没看错,就是在头和尾加上两个空的列表项,这样就可以选择到第一个和最后一个啦.
欢迎大伙评论.
项目github链接
先奉上链接地址:
IScroll github
IScroll 网站
IScroll介绍
IScroll是一个高性能,体积小,无依赖性,多平台的一个javascript滑动器.和Android里面的差不多.IScroll不只有滑动功能,还有缩放,平移等功能,具体看文档撒.
IScroll的动画效果也有很多bounce, elastic, back…等等,以及自定义事件onbeforescrollstart,onscrollstart,onscroll,onscrollend….
艾玛.真难编,免(zi)得(ji)把(qu)大(kan)家(wen)误(dang)导(ba)了.
导入IScroll
在页面添加 <script src=”js/iscroll.js”></script>导入IScroll.使用IScroll
IScroll的用法比较简单,具体可参考github上面的文档.首先我们为要滑动的div添加一个id.
<div class="item" id="scroll-item"> <ul> <li>1</li> <li>2</li> <li class="selected">3</li> <li>4</li> <li>5</li> </ul> </div>
创建一个IScroll,直接new.
var scroll = new IScroll("#scroll-item", { bounceEasing: "ease", bounceTime: 600 });
其中#scroll-item为要滑动div的id,bounceEasing为滑动效果,bounceTime为时间,可自行调整.
现在我们的控件就可以滑动了.
但是接下来在浏览器上面却发现卧槽,滑不动啊,是不是在逗我.
不要着急,现在我们滑动列表里面正好只有5个..5个..;5*40=200px;还没超出范围当然滑不动.让我们多复制几个列表项就可以了(WebStorm按住ctrl+d).
就像下面这样.
<li>1</li> <li>2</li> <li class="selected">3</li> <li>4</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li>
然后再去滑动,是不是就可以了呢.
好了现在我们的控件已经可以滑动起来啦.
但是有没有发现最后面两项和最前面两项是不是怎么拉都拉不出来?
淡定,淡定.
使出我们的终极大招:
<li></li> <li></li> <li>1</li> <li>2</li> <li class="selected">3</li> <li>4</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li>5</li> <li></li> <li></li>
对,你没看错,就是在头和尾加上两个空的列表项,这样就可以选择到第一个和最后一个啦.
结语
好哒,让控件怎么滑动起来已经教给大家啦,相信不少有能力的小伙伴已经跃跃欲试想把控件封装起来哒,大家可以自行封装噢,反正原理已经知道啦,后面会再出怎么封装这个控件的文章.欢迎大伙评论.
项目github链接
相关文章推荐
- JS控件:日期、时间
- 日期 时间js控件
- JS日期和时间选择控件
- 收集几个js实现的日期时间控件
- JS日期和时间选择控件升级版(自写)
- JS日期和时间选择控件
- JS日期和时间选择控件
- 带时间选择得JS日期控件
- js日期时间控件
- js时间控件,不要日期,只显示年和月 -[百度博客搬家]
- 带时间选择的JS日期控件
- js 时间日期控件 可以选择时间的控件
- 一个优雅的js日期时间控件
- js 时间 日期 日历控件
- 带时间选择得JS日期控件
- 带时间选择的JS日期控件
- js自用日期时间选择器试用版上线
- 显示日期时间选择框的js控件
- (很好用)JS时间控件实现日期的多选
- javascript 日期时间控件 js代码