uni-app吸顶+带动画滑动的tabs导航栏

需求就是两点：
1，页面滚动到该导航位置吸顶
2，导航tabs切换带动画，包括下划线

效果如下：

首先是可滑动，用scroll-view实现，然后吸顶效果是在Dcloud是在市场找的，下划线滑动动画是插件市场这个插件改来的，show code：

**// html**


	
	
		
			
				{{item}}
			
		
		
		
		
	
	
	
		
		全部
	


**// js**



	**// style**
	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		top: var(--window-top);
		z-index: 99;
		flex-direction: row;
		margin: 0px;
		border-top: 1px #f9f9f9 solid;
		border-bottom: 1px #f9f9f9 solid;
		background: #fff;
	}
	.listAll{
		width: 20%;
		text-indent: 62rpx;
		font-size: 30rpx;
		border-left: 1px #eee solid;
		margin: 1% 0 ;
		padding: 5rpx;
		position: relative;
		image{
			position: absolute;
			left: 20rpx;
			top: 8rpx;
		}
	}
	.tab {
		position: relative;
		display: flex;
		font-size: 28rpx;
		padding-bottom: 10rpx;
		white-space: nowrap;
		&__item {
			flex: 1;
			padding: 0 20rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			color: #666;
			&.active {
				color: #09C2C9;
			}
		}
	}
	.tab__line {
		display: block;
		height:6rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		border-radius: 3rpx;
		position: relative;
		background: #2FC6CD;
	}
	.scroll-view_H {
		/* 文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。 */
		white-space: nowrap;
		width: 100%;
	}

ok，就这么多，至于动画那部分的实现的计算逻辑，可以去插件市场看看我上面提到的那个插件，我本来直接也是用那个插件，但是各种不适用，所以拿出来了我自己需要的部分。

苦海无涯，学习是岸