仿swipe實現移動端——滑動導航

最近項目其中一個需求是wap滑動導航，因爲開發時間不長，本打算想偷懶，用swipe的插件實現這個需求，以前一直用這個插件，來實現首頁banner圖的輪播之類，滑動和滾動的特效，挺實和方便的一個插件。

進入測試階段，收到一個bug，就是在ios11-webview中，頁面滑到底部，從新回到頂部時，滑動導航會忽閃忽現。仔細查閱官方文檔，並無什麼卵用。最後只好用js實現wap滑動導航。不說了，上代碼！

CSS

* {padding: 0;margin: 0}
ul li {list-style: none;}
.page-wrapper {max-width: 720px;margin: 0 auto;}
.main-box {width: 100%;height: 50px;line-height: 50px;background-color: #FFB923;color: #fff;font-size: 16px;position: relative;overflow: hidden;}
.main-box ul {margin: 0 10px;height: 50px;position: absolute;width: auto;overflow-x: scroll;left: 0;}
.main-box ul li {float: left;margin-right: 10px;}
.log_box{height: 30px;margin: 50px 0;}
.clearfix:after,.page-row:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0}
.clearfix,.page-row{*zoom: 1}
.hide{display: none;}
::-webkit-scrollbar {display: none}
複製代碼

HTML

<div class="page-wrapper">
    <div class="main-box" id="halder_ID">
    	<ul id="tab_ul" class="clearfix">
            <li id="tab_li">欄目一</li>
            <li>欄目二</li>
            <li>欄目三</li>
            <li>欄目四</li>
            <li>欄目五</li>
            <li>欄目六</li>
            <li>欄目日</li>
    	</ul>
    </div>
    <div id="show_itembox">
        <div>1</div>
        <div class="hide">2</div>
        <div class="hide">3</div>
        <div class="hide">4</div>
        <div class="hide">5</div>
        <div class="hide">6</div>
        <div class="hide">7</div>
    </div>
</div>
複製代碼

Javascript

window.onload = function() {
    var contal_ul = document.getElementById("tab_ul"); //獲取移動目標元素
    var contal_li = contal_ul.getElementsByTagName('li'); //獲取點擊目標元素
    var getLi = document.getElementById('tab_li'); //獲取某個li
    var getLi_Val = window.getComputedStyle(getLi, null); //獲取li的元素屬性
    var tag_width = parseInt(getLi_Val.marginRight) + parseInt(getLi_Val.width) * (contal_li.length + 1) + 20; //經過計算，獲取ul的寬度
    contal_ul.style.width = tag_width + 'px'; //設置ul的寬度
    function touchedMoveFun(ev) { //移動方法
    	ev = ev || window.ev;
    	var screen_w = window.innerWidth; //獲取手機屏幕寬度
    	var offset_left = contal_ul.offsetLeft; //獲取目標元素距離屏幕左邊的位移
    	var coordinateX = ev.changedTouches[0].clientX; //獲取觸摸點的X位置
    	var setting_left = 0; //聲明位移的變量
    	if (parseFloat(coordinateX) >= screen_w / 2) { //限制左邊的最大位移
    		setting_left = 10;
    	} else if (parseFloat(coordinateX) <= -(screen_w - tag_width)) { //限制右邊的最大位移
    		setting_left = screen_w - tag_width;
    	} else {
    		setting_left = parseFloat(coordinateX) - (tag_width / 4); //自由位移
    	}
    	contal_ul.style.left = setting_left + 'px'; //設置位移
    }
    //添加事件
    document.addEventListener("touchstart",function() {document.touchmove = null;},false);
    document.addEventListener("touchmove", touchedMoveFun, false);
    document.addEventListener("touchend",function() {document.touchmove = null;},false);
    //點擊切換tab
    for (var y = 0; y < contal_li.length; y++) {
    	contal_li[y].index = y;
    	contal_li[y].onclick = function() {
            var _this = this.index;
            var showBox = document.getElementById("show_itembox");
            var showItem = showBox.getElementsByTagName('div');
            for (var i = 0; i < showItem.length; i++) {
                showItem[i].style.display = 'none';
            }
            showItem[_this].style.display = 'block';
    	}
    }
}
複製代碼

效果圖

如代碼有錯誤的，或者遇到問題，請指教！互相學習！