apicloud app 滾動導航選單實現
阿新 • • 發佈:2019-01-04
apicloud 製作滾動導航選單 下劃線左右平滑移動的動畫
#scoreMenuNav { border: 0px solid red; } #scoreMenuNav ul { overflow: hidden; overflow-x: auto; white-space: nowrap; background-color: #ffffff; padding-top: 0.1rem; position: relative; } #scoreMenuNav ul::-webkit-scrollbar { display: none } #scoreMenuNav li { line-height: 1.8rem; text-align: center; margin:auto 10px; display: inline-block; border-bottom: 0px solid #fff; } #scoreMenuNav li.actives { /*border-bottom: 2px solid red;*/ color: red; } .active-menu { /*border-bottom: 2px solid red !important;*/ color: red; } #scoreMenuNav .nav-line{ height: 0px; background-color: 1px solid green; border-bottom: 2px solid blue !important; position: absolute; bottom:0px; /*transition:0.3s width ease-out;*/ -webkit-transition: all .3s; transition: all .3s; /*-webkit-transform:translate(10px); /*animation: moveL 1s; /*-moz-animation: moveL 1s; /* Firefox */ /*-webkit-animation: moveL 1s; /* Safari 和 Chrome */ /*-o-animation: moveL 1s; Opera */ /*animation-fill-mode:forwards;*/ }
上面是css,下面是html
<nav id="scoreMenuNav"> <!--div id="MenuNav"--> <ul> <li tapmode="actives" v-for="(item,index) in memuData" @click="openOneFrame(index)">{{item.snsCatalogName}}</li> <div class="nav-line" id="nav-line"></div> </ul> </nav>
moveLine:function(newindex,currentMenu){//選單下劃線與滾動動作 var _self = this; var scoreMenuUl = $api.dom('#scoreMenuNav ul'); var currentMenuPos = $api.offset(currentMenu); console.log(currentMenuPos.l+currentMenu.innerHTML+":"+currentMenu.offsetLeft); //下劃線滾動 var line = $api.dom("#scoreMenuNav .nav-line"); $api.css(line,"-webkit-transform:translateX("+currentMenu.offsetLeft+"px)"); line.style.width = currentMenuPos.w+'px'; //導航選單滾動 if (_self.OldIndex < newindex) { console.log("左移 左邊的距離:"+currentMenuPos.l+"螢幕寬度:"+api.winWidth); currentMenu.offsetLeft + currentMenuPos.w >= api.winWidth ? scoreMenuUl.scrollLeft = scoreMenuUl.scrollLeft + currentMenuPos.w+25 : ''; }else if (_self.OldIndex > newindex) { currentMenuPos.l < 0 ? scoreMenuUl.scrollLeft = scoreMenuUl.scrollLeft - currentMenuPos.w-25 : ''; console.log("右移 左邊的距離:"+currentMenuPos.l+"螢幕寬度:"+api.winWidth); } //_self.OldIndex > newindex ? scoreMenuUl.scrollLeft -= $api.offset(currentMenu).w : scoreMenuUl.scrollLeft += $api.offset(currentMenu).w; }