本文所涉及的讲解内容：
- 导航的横向滚动效果使用了微信原生组件scroll-view
- 利用绝对定位固定导航的第一个tab
- 导航栏滚动时固定的第一个tab右侧阴影的样式设置
- 利用js防抖动态控制阴影样式
滚动的导航效果很常见，这次给导航多加了点花样，固定第一个元素，其他的正常横向滚动，效果如下：
第一个固定元素的右侧会有一个随滚动出现的阴影。首先来说下怎么将第一个元素固定的--
1.固定第一个元素
其实很简单，用一个与导航相同高度的绝对定位元素覆盖在导航的第一个元素上就可以了，再设置适当的宽度，就是这样：
height:var(--categoryTableHeight);是CSS的自定义属性变量，为重复使用的属性值定义语义化的值，细节可以去看这篇developer.mozilla.org/zh-CN/docs/… 文章
这里，categoryTableHeight就是导航的高度了,定义如下
page {
--categoryTabHeight: 98rpx;
}
复制代码2.固定元素右侧的阴影样式
接下来就是右侧的阴影了，为了方便讲解，我先把样式类固定住，如下：
b设置了一个比导航高度矮一些的高度64rpx
a用绝对定位将它固定在离元素右侧12rpx的位置
c用渐变背景设置一个从右透明色至左橙色的一个渐变下效果 为了让这块小小的遮罩层有那种朦胧的美，d处设置一下元素透明度就好了：opacity:0.6; 这样会让滚动时出现的阴影在遮住文字时有种犹抱琵琶半遮面的感觉，让用户的感受更自然真实，如下
3.动起来
现在准备工作做好了，接下来就是交互了。在导航滚动时动态设置class类即可，scroll-view组件有个滚动事件监听的方法bindscroll，定义一个变量，在滚动事件触发时变量设置为true，贴代码：
let timer = 0
Page({
data:{
isCategoryScrolling: false
},
handleCategoryScroll(param) {
if (!this.data.isCategoryScrolling) {
this.setData({
isCategoryScrolling: true
})
}
//每当timer有值时取消掉计时，并在下面重新开启一个新的计时，
//直到滚动停止，会只执行一个超时调用，滚动停止时，给变量设置为false,隐藏右侧阴影的class类
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
console.log('stop')
this.setData({
isCategoryScrolling: false
})
}, 200)
}
})
复制代码经测试，200毫秒的间隔会更自然流畅
防抖其实可以用lodash,在这里自己写原生的更能加深印象
用了绝对定位覆盖了导航的第一个元素，相应的，第一个元素的业务逻辑代码也需要挪到新设置的元素上，给该元素动态设置下激活时的class，并单独处理下点击事件逻辑就好了。
总结
虽然只是一个小小的效果总结，重新去整理时却有好多小细节值得自己去学习，比如背景渐变 270deg，当时在做这个功能时并没有多想这个方向是如何的，在此记录下：
不积跬步无以至千里，吼吼~