让tab导航在手机移动端有平滑滑动的效果

snowbaby-kang 2021-08-15 原文

这种tab左右切换，使样式有左右滑动效果

html代码如下

<ul class="ui-tab-nav ui-tab-nav-three ui-border-b c0">
        <li class="current" rel="launch">我发起的</li>
        <li class="" rel="partake">我参与的</li>
        <li class="" rel="like">我喜欢的</li>
      </ul>

这里使用的是frozenui的tab方法，我需要在ul上加上类名以知道当前在那个菜单上，附上js

var tab = new fz.Scroll(\'.ui-tab\', {
    role: \'tab\',
});
tab.on(\'beforeScrollStart\', function(from, to) {
    $(".ui-tab-nav").removeClass("c"+from);
    $(".ui-tab-nav").addClass("c"+to);
});

css样式代码，frozenui的样式不写了，写上默认的，我用的时候默认tab是两个，所以当3个的时候另外加了一个类名

ui-tab-nav-three

.ui-tab-nav:after{
    content: "";
  width: 50%;
  height: 2px;
  background: @common-color-red;
  display: block;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom:0;
  -webkit-transition: -webkit-transform 0.2s ease-out;
}
.ui-tab-nav.ui-tab-nav-three:after{width:33.33%;}
.ui-tab-nav.c0:after{-webkit-transform: translate(0,0);}
.ui-tab-nav.c1:after{-webkit-transform: translate(100%,0);}
.ui-tab-nav.ui-tab-nav-three.c2:after{-webkit-transform: translate(200%,0);}