博客

在移动端导航的功能太常见了，很多时候还需要可滑动，点击的时候还需要当前动画到中间。实现的方法很多，今天分享一个本人最近开发所用的方法。

因为本人都是用vue开发，今天写用jQuery的方法，原理都是一样的。

标签：

<div>
    <ul>
        <li id="nav0">导航11</li>
        <li id="nav1">导航22</li>
        <li id="nav2">导航33</li>
        <li id="nav3">导航44</li>
        <li id="nav4">导航55</li>
        <li id="nav5">导航66</li>
        <li id="nav6">导航77</li>
        <li id="nav7">导航88</li>
        <li id="nav8">导航99</li>
    </ul>
</div>
 
CSS：
div{
    overflow: hidden;
    height: 25px;
}
.nav{
    overflow-x: scroll;
    width: 100%;
    height: 30px;
    margin: 0 auto;
    white-space: nowrap;
    background: #aaa;
}
.nav li{
    display: inline-block;
    padding: 0 5px;
    line-height: 25px;
    font-size: 16px;
    color: #fff;
}
.nav li.active{
    color: red;
}
 
JS：
$('.nav li').click(function () {
   var index = $(this).index();
    $('.nav li').removeClass('active');
    $(this).addClass('active');
    $(".nav").animate({scrollLeft: $('#nav' + index)[0].offsetLeft - $(window).width()/2 + $('#nav' + index)[0].clientWidth/2},500);
});
复制代码

这边需要注意的几个地方： 1、.nav样式的overflow-x: scroll;和white-space: nowrap;两个属性 2、li样式的display: inline-block;属性。 3、外层div的高度比ul的高度低，为了去除滚动条。 4、只有在手机模式可以滑动。 5、当前导航类型动画居中滚动的距离，先移动到最左边，然后到屏幕一半，然后是当前项一半。

感兴趣的可以直接复制代码看效果。

欢迎关注Coding个人笔记 公众号