像往常一样，让我先说几句话：

作为一名开发工程师，由于公司业务的变化，最近才开始开发小程序。不得不说，相比之下，小程序确实很好用（“其实陷阱还是有的，而且还很多”）而且有很多非常丰富好用的第三方组件，尤其是和云结合起来的时候开发，基本可以覆盖大部分应用场景。它最适合中小型项目。这是非常划算的。另外，微信有这么大的用户群体，推广起来也很容易（“奇怪”）。 。 。

好吧，我们回到主题。这次我将分享我在项目开发过程中使用的tabs组件并展示最终的效果。如果这确实是您的事，您可以继续阅读下面的内容。

（ps：视频已经调慢了，其实很流畅……）

这是项目要求中要达到的效果。在-view-页面中，自定义导航栏上的几个标签用于在点击后以及页面未下拉时跳转到当前页面的某个锚点。 ，导航栏背景透明，后退图标和标签字体显示为白色；页面下拉时，导航栏背景为白色，标签字体和返回图标变为黑色。

要达到需求中描述的效果，首先要了解以下几点：

1：获取页面拉起后距离顶部的距离变化值。该值将作为修改样式的判断条件；

2：导航栏、标签和返回图标的布局。导航栏上的view应该位于和back的下方，即z-应该低于和back，而且都是固定的；

3：设置导航栏背景的透明度。颜色根据项目要求的风格一致性而定。这里设置为白色。如果根据距离设置透明度，就会有渐变效果。这里根据某个值的变化，会修改为0。或1，即无渐变效果；

4：切换后退图标样式，这里通过指定不同的URL来实现切换；

5：重点来了，tabs组件的样式如何修改？这就涉及到第三方组件样式与外部接口隔离的问题。即不能直接通过指定样式来修改样式。需要在其对应的子元素节点中设置。

5.1：如何设置tabs组件背景透明？

5.2: 如何设置选项卡组件标签被选中时的颜色？

5.3: tabs组件标签未选中时如何设置默认颜色？

对于以上三个问题，我参考了文档中列出的外部样式类，但都无法实现。

但还有其他方法可以设置它。作为程序开发人员，调试是尤为重要的一环。处理这种界面风格时，调试可以更直观地找出问题所在：

比如上面的5.1：如何设置背景透明：

找到之后，就可以在样式中进行设置了。以下是三个问题的答案（并非唯一）

/* 设置tabs为透明背景 */ van-tabs .van-tabs__scroll {     background-color: rgba(255, 255, 0, 0); } /* 指定tabs中被选中title的颜色 */  .index-tabs .van-tab--active .van-ellipsis { color: #FFC125; }  /* 设置tabs标签未被选中时title的颜色 */

.index-tabs2 .van-ellipsis {     color: white; }

那么如何在页面向下滚动时动态改变tabs组件标签的颜色呢？答案是上面5.3：tabs组件标签未选中时如何设置默认颜色？只需修改页面中tabs标签的样式类即可

<van-tabs ...... class="{{navigatonOpacity < 0.5 ? 'index-tabs2' : ''}}" // 就是这里，根据条件来修改样式类 ...... > <van-tab title="详情" /> <van-tab title="配套" /> <van-tab title="须知" /> <van-tab title="周边" /> van-tabs>

至此，基本就可以实现如上所示的效果了。当然，这里只列出了部分方法。还有其他更好的方法可以实现。