按照惯例，开头先啰嗦几句：

作为一个安卓开发工程师，由于公司业务的变化我也是最近才开始接触到小程序的开发，不得不说，对比起来小程序是真的香，易上手（“其实坑还是有的，而且很多”）而且还有很多非常丰富好用的第三方组件，特别是再结合上云开发之后，基本上已经能够涵盖大多数应用场景，对于中小型的项目来说是最合适不过的了，性价比极高，加上微信有这么庞大的用户群体，推广起来也是非常容易的（“才怪”）。。。

好了切回正题，这次分享的是我在项目开发过程中所用到tabs组件，献上最终实现的效果，如果确实是你的菜的话那么可以继续往下看

（ps：视频经过速度慢放调整，实际很顺滑。。。）

这是项目需求当中要实现的一个效果，在scroll-view包裹的页面中，自定义导航栏上边的几个标签用于点击之后跳转到当前页的某个锚点，并且在页面未下拉的时候，导航栏背景是透明的，back图标和标签字体显示为白色；当页面下拉后导航栏背景呈白色，而标签字体和back图标转变成黑色。

要实现需求中所描述的那种效果，首先得搞清楚以下几点：

1：拿到页面上拉之后距顶部距离变化的数值，该数值将作为修改样式的判断条件；

2：导航栏和标签以及back图标的布局方式，导航栏那层view应该位于标签和back下，也就是z-index要低于标签和back，同时他们的position都是固定的；

3：导航栏背景透明度的设置，颜色根据项目要求的样式一致性，这里设置为白色，而透明度如果是按scroTop的距离来设置会有渐变的效果，这里将根据scrollTop变化到某个值时修改opacity为0或1，也就是无渐变效果；

4：back图标样式的切换，这里是通过指定image不同的url来实现切换的；

5：重点来了，tabs组件的样式如何修改？这个涉及到了第三方组件样式和外部界面隔离的问题，也就是无法直接通过指定一个class去修改样式，需要在其对应子元素节点中进行设置

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

5.2：tabs组件标签被选中时的title颜色如何设置？

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

上边的三个问题，我参考了文档列出的外部样式类，但是都没有能够实现

但是还有其他方法可以进行设置，作为程序开发人员，调试是特别重要的一环，而对于这种界面样式的处理，调试可以更为直观的看出问题所在：

比如上面的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组件标签title的颜色呢？答案就是上边的 5.3：tabs组件标签未被选中时title默认颜色如何设置？ 只需要修改页面当中tabs标签的样式类就好

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

到此，基本上就能够实现上边所展现的效果了，当然这里只列举出了其中一些方法，还有其他更好的方法可以实现