移动端导航条下划线或者背景色平移效果或者拉伸效果实现

• 将导航条背景色为浅粉色，点击时，进行平移的效果，当然修改下代码和样式，可以改为下划线拉伸的效果

• css样式，这里用的less写法，差不多可以看得懂,可以自己进行修改

  nav {
        position: relative;
        .vw(height,88);
        width:100%;
        background: #fff;
        .vw(font-size,30);
      }
      nav .line {
        .vw(height,66);
        .vw(width,500);
        position: absolute;
        // bottom: 0;
        .vw(bottom,10);
        background: #FFF2F3;
        .vw(border-radius,40);
        opacity: .4;
        z-index: 111;
      }
    //   nav ul li .active{
    //     color:#F9404A ;
    //   }
      nav ul {
          width: 100%;
          height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      nav ul li {
          text-align: center;
          width: 40%;
        // height: 30px;
        // .vw(margin-right,40);
        transition: all 0.4s;
        color:#9B9B9B ;
        // color:#F9404A ;
      }
      nav ul li  {
        color:#9B9B9B ;
      }
      nav ul li.active{
        color:#F9404A !important;
        font-weight: bold;
      }

• 页面中的写法原生的也可以将事件替换就可以了

   <nav>
            <ul>
                <li class="active" @click="toggle(0)" v-if="isIpone">
                    交易记录
                </li>
                <li class="active" @click="toggle(1)" v-if="!isIpone">
                    可兑换签纸贺
                </li>
                <li @click="toggle(2)">
                    兑换历史
                </li>
            </ul>
            <div class="line"></div>
        </nav>

• js部分，可以将我注释的打开就会显示拉伸的效果了

 // 头部选项卡的步骤

        var nav = $('nav');
        var line = $('.line');

        var active = nav.find('.active');
        var pos = 0;
        var wid = 0;
        if (active.length) {
            pos = active.position().left;
            wid = active.width();
            line.css({
                left: pos,
                width: wid
            });
        }

        nav.find('ul li').click(function (e) {

            if (!$(this).hasClass('active')) {
                var _this = $(this);
                nav.find('ul li').removeClass('active');
                var position = _this.position();
                var width = _this.width();
                if (position.left >= pos) {
                    // line.animate({ left: position.left - pos }
                    // ,100,function(){
                    //     line.animate({width:width},100)
                    // })
                    line.animate({
                        width: ((position.left - pos) + width)
                    }, 100, function () {

                        line.animate({
                            width: width,
                            left: position.left
                        }, 150);
                        _this.addClass('active');

                    });
                } else {

                    line.animate({
                        left: position.left,
                        // width: ((pos - position.left) + wid)
                    }, 300, function () {
                        line.animate({
                            width: width
                        }, 150);
                        _this.addClass('active');
                    });
                }

                pos = position.left;
                wid = width;
            }
        });

• 我也是在大佬写的效果上进行了一点点修改，也可以点击链接，去大佬的里面去看看https://www.jianshu.com/p/82c9e12f5088