移动端导航简单实现

wade

发布于 2020-04-24 10:46:08

7300

发布于 2020-04-24 10:46:08

文章被收录于专栏：coding个人笔记coding个人笔记

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

因为本人都是用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、当前导航类型动画居中滚动的距离，先移动到最左边，然后到屏幕一半，然后是当前项一半。

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

（完）

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-10-09，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery