移动web--滚动（可以滑动的）导航栏的制作

r囧r小猫 2022-03-30 10:55 625阅读 0赞

### 滑动的导航栏 ###

1.  有时候导航栏的长度过于长，我们为了界面的美观和用户体验，会将导航栏在一行（或则一列）显示，超出部分隐藏，而且不用管内容的长短，有利于前后台数据的交互，大部分情况是：在移动web网站中，容器中的ul过长，我们通常会将ul超出容器的部分隐藏
2.  移动网站上的横向导航栏

*  某直播平台的横向滚动导航栏–效果浏览：[https://m.douyu.com/][https_m.douyu.com]  
    ![游戏直播平台][20190105200354102.png]
 *  某新闻平台的横向滚动导航栏–效果浏览：[https://m.toutiao.com/?W2atIF=1][https_m.toutiao.com_W2atIF_1]![新闻][20190105201147951.png]
 *  电商网站：[https://pro.m.jd.com/mall/active/3YvKJrc4e4WK7aZ46j3h5UMCvEn4/index.html][https_pro.m.jd.com_mall_active_3YvKJrc4e4WK7aZ46j3h5UMCvEn4_index.html]![电商平台][20190105200934302.png]

1.  移动网站上的纵向滚动导航栏

*  某电商平台  
    [https://pro.m.jd.com/mall/active/ZQXsW6o4iFPgHhPMjr9LVjVoFai/index.html][https_pro.m.jd.com_mall_active_ZQXsW6o4iFPgHhPMjr9LVjVoFai_index.html]  
    ![电商][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]

1.  控制导航栏滚动的重要性  
    电商，问答，直播，新闻…大部分平台都会使用到移动导航栏，特别是在移动web，典型的应用场景位于移动设备App和web，如何控制导航栏的滚动

### iScroll ###

> iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件

*  文档教程  
    [http://caibaojian.com/iscroll-5/][http_caibaojian.com_iscroll-5]
 *  下载地址  
    [https://github.com/cubiq/iscroll][https_github.com_cubiq_iscroll]
 *  简单的使用（这里以横向导航栏滚动为例子），具体效果可以看上面推荐的网站
    
    1.  我们尽可能保持DOM结构的简洁
    2.  IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化
    3.  查看文档的基本功能可知，默认情况下只有纵向滚动条可以使用。如果你需要使用横向滚动条，需要将scrollX 属性值设置为 true
    4.  当然，isScroll有更强大的作用，我们使用它是为了解决我们的需求和提高我们的开发效率

#### HTML ####

#### 我们这里是移动web上的使用，所以需要做适配方案 ####

#### CSS ####

#### JS的调用（初始化） ####

#### 效果 ####

![GIF动态效果][GIF]

### 原生JS实现滑动的导航栏 ###

1.  iScroll只能称之为工具，它可能会出现一些bug，当然可以选择更优的插件，但是，原生JS还是必不可少的
2.  这里以纵向的导航栏为例子，并综合到案例中去  
    ![左边做滑动][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]
3.  实现左边的滑动

#### HTML ####

html和上面的横向例子一样

#### CSS设置li不浮动，ul的宽度和li一样即可，超出父盒子隐藏，父盒子（\#wrapper）相对定位（relative），子盒子（ul）绝对定位（absolute）效果一样即可 ####

1.  JS的封装  
    // 1. ulMove跟随着鼠标的移动  
    // 2. 当上面移动超过0时，手指离开时移动到原位  
    // 3. 当下面移动超过ul的高度时，手指离开时移动到原位  
    // 4. 限制ul的移动，不能让它移动得太过  
    // 4.1 往下拉时，不能让其距离顶部（jd\_bar）超过一定距离，这里限制为100  
    // 4.2 往上拉，不能让其距离顶部（jd\_bar）超过一定距离，这里限制为100

// ele是滑动的容器，一般是需要移动的导航栏ul，fartherEle是装着它的容器，一般是ul的父元素
    function touchScroll(ele,fartherEle){ 
    	//开始触碰距离手指距离屏幕顶端的位置，初始化为0
    	var startDistance = 0
    	//记录再次移动ul时上次ul定位的位置
    	var endDistance = 0
    	//手指移动的距离
    	var moveDistance = 0
    	//需要移动元素的高度
    	var ulHeight = ele.offsetHeight
    	//容器（父元素）的高度
    	var barH = fartherEle.offsetHeight
    	//barHide,当ele向上滑时，ul滑到底部隐藏的距离
    	var barHide = ulHeight - barH
    	//开始触碰ul时
    	ele.addEventListener('touchstart',function(e){ 
    	//手指距离屏幕顶端的距离
    		startDistance = e.touches[0].clientY
    	})
    	//手指在屏幕上滑动
    	ele.addEventListener('touchmove',function(e){ 
    	//这是限制ul距离上下都只能是100px，后面用到
    		var maxTop = 100
    		//手指在ul移动的距离（endDistance）
    		moveDistance = e.touches[0].clientY - startDistance + endDistance
    		//限制ul定位的位置，距离父盒子顶部不能超过100
    		if(moveDistance>=maxTop){ 
    			moveDistance = maxTop
    		}
    		//限制ul定位的位置，距离父盒子底部部不能超过100
    		if(moveDistance<=-(barHide + maxTop)){ 
    			moveDistance = -(barHide + maxTop)
    		}
    		//移动时取消后面的过渡效果
    		this.style.transition = 'none' 
    		//此时，ul的移动范围（定位）已经设定，可以跟随着手指的移动而移动
    		this.style.top = moveDistance + 'px'
    	})
    	ele.addEventListener('touchend',function(e){ 
    	//当移动ul距离顶部超过0时(top>0),使其ul缓动滑动到父盒子顶部
    		if(moveDistance>=0){ 
    			moveDistance = 0
    			this.style.transition = 'top 1s'
    		}
    	//当移动ul距离底部超过0时(top>0),使其ul底部缓动滑动到父盒子底部
    		if(moveDistance <= -barHide){ 
    			moveDistance = -barHide
    			this.style.transition = 'top 1s' 
    		}
    		//记录此时ul的定位位置，用于下次
    		endDistance = moveDistance
    		//范围限制好。可以滑动了
    		this.style.top = endDistance + 'px'
    	})
    }

#### 调用 ####

touchScroll(document.querySelector('ul'),document.querySelector('#wrapper'))

#### 效果 ####

![效果][20190105211337124.gif]

[https_m.douyu.com]: https://m.douyu.com/
[20190105200354102.png]: /images/20220330/244d805aba314cd694fbf73d94cd9557.png
[https_m.toutiao.com_W2atIF_1]: https://m.toutiao.com/?W2atIF=1
[20190105201147951.png]: /images/20220330/e4d3a92f40794035803109199653ac6e.png
[https_pro.m.jd.com_mall_active_3YvKJrc4e4WK7aZ46j3h5UMCvEn4_index.html]: https://pro.m.jd.com/mall/active/3YvKJrc4e4WK7aZ46j3h5UMCvEn4/index.html
[20190105200934302.png]: /images/20220330/72d59595618c4e5697c8168edd9d8e51.png
[https_pro.m.jd.com_mall_active_ZQXsW6o4iFPgHhPMjr9LVjVoFai_index.html]: https://pro.m.jd.com/mall/active/ZQXsW6o4iFPgHhPMjr9LVjVoFai/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220330/ffb19b6bb9a349ab87740fa4109f658f.png
[http_caibaojian.com_iscroll-5]: http://caibaojian.com/iscroll-5/
[https_github.com_cubiq_iscroll]: https://github.com/cubiq/iscroll
[GIF]: /images/20220330/48e1dafeffb44bf9bd0743d3b0df4779.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220330/8120bdcfab0b495d9e69ec7b38084872.png
[20190105211337124.gif]: /images/20220330/a363a7d33c73430f80af79e8bd2ddf18.png