基于Zepto的移动端横向滑动点击并高亮居中显示导航条

有时候在移动网页中会有这样的需求，导航项目个数太多，然而手机屏幕的宽度是有限的，这个时候就希望导航项能横向排列左右滑动选择，当点击某个栏目之后这个栏目高亮显示并位于屏幕中间。今天我们就介绍一种解决这个需求的方案。我们采用zepto运行库来制作效果。

Zepto是什么?

Zepto是专门为现代智能手机浏览器退出的 Javascript 框架, 拥有和jQuery相似的语法, 但是和jQuery相比下来, 他有很多优点, Zepto是jQuery的精简，针对移动端去除了大量jQuery的兼容代码。大小方面, 压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小, 但是功能很齐全, 多出来了一些触摸屏的事件 , 它唯一不支持的就是万恶的IE, 不过用它来开发iPhone和Android网页绝对是首选了.

Zepto与jQuery的区别

针对移动端程序，Zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件），Zepto是不支持IE浏览器的。
DOM操作的区别：添加id时jQuery不会生效而Zepto会生效
事件触发的区别：使用jquery时load事件的处理函数不会执行；使用zepto时load事件的处理函数会执行
事件委托的区别：zepto中，选择器上所有的委托事件都依次放入到一个队列中，而在jquery中则委托成独立的多个事件
width() 与 height()的区别：zepto由盒模型（box-sizing）决定，用.width()返回赋值的width，用.css('width')返回border等的结果；jquery会忽略盒模型，始终返回内容区域的宽/高（不包含padding、border）.
offset()的区别：zepto返回{top,left,width,height}; jquery返回{width,height}。zepto无法获取隐藏元素宽高，jquery可以
zepto中没有为原型定义extend方法而jquery有
zepto的each方法只能遍历数组，不能遍历JSON对象。

效果实例代码

/*引入zepto及扩展库*/
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/zepto.extend.js"></script>
<script type="text/javascript" src="js/zepto.ui.js"></script>
<script type="text/javascript" src="js/zepto.iscroll.js"></script>
<script type="text/javascript" src="js/navigator.js"></script>
<script type="text/javascript" src="js/navigator.iscroll.js"></script>
<script type="text/javascript">
/*加载滑动操作*/
Zepto(function($){
$('#nav-smartSetup').navigator();
});
</script>

/*html代码如下*/
<div class="ui-navigator" id="nav-smartSetup">
     <div class="nav-wrap">
         <ul>
            <li><a href="/a/" class="cur">栏目项一</a></li>
            <li><a href="/b/">栏目项二</a></li>
            <li><a href="/c/">栏目项三</a></li>
            <li><a href="/d/">栏目项四</a></li>
            <li><a href="/e/">栏目项五</a></li>
        </ul>
    </div>
</div>

CSS代码如下：

.ui-navigator { display: -webkit-box; -webkit-tap-highlight-color: rgba(0,0,0,0); background: #f3f3f3; padding-top: 20px;}
.ui-navigator .nav-wrap { -webkit-box-flex: 1; border: 2px solid #444; border-left:0; border-right:0; height: 49px;}
.ui-navigator ul{ display: -webkit-box; -webkit-box-flex: 0; max-width: 1147px; white-space: nowrap; overflow-x: auto; overflow-y: hidden;}
.ui-navigator ul li { -webkit-box-flex: 1; -webkit-box-flex: 0;}
.ui-navigator ul li a{ display: -webkit-box; -webkit-box-sizing: border-box; -webkit-box-align: center; -webkit-box-pack: center; padding-right: 8px; padding-left: 8px; margin: 0 13px; height: 49px; color: #4a4a4a; font-size: 16px; line-height: 49px; }
.ui-navigator ul a.cur { border-bottom: 6px solid #ff3d58; color: #ff3d58; font-weight: bold}

如果项目页面中使用了jQuery，有可能两者会出现冲突，解决办法为在jQuery引入后添加这样一条代码：

<script type="text/javascript">jQuery.noConflict()</script>

并且要将所有的jQuery调用中的“ $ ”符号修改为jQuery。
教程到此结束，有需要的朋友不妨试试看。

附示例完整代码：MobileNavScroll.zip

标签: zepto

¥ 1.88
微信扫描即可打赏
服务器好贵
网站需要运营
给点小费以表支持