本节为大家讲解怎么让控件滑动起来,这里需要用到一个第三方库IScroll.js.

先奉上链接地址:

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链接