小程序srcoll-view导航案例

<scroll-view scroll-x>
    <view wx:for="{{bArr}}" data-index="{{index}}" bindtap='swithFn' class='{{touchindex==index ? "currentTab": ""}}'>
        {{item}}
    </view>

</scroll-view>

scroll-view{ width: 100%; display:flex; white-space: nowrap;  font-size: 26rpx;  color: #fff; height: 60rpx; }

scroll-view view {
    padding: 10rpx 25rpx;
    margin: 0 20rpx;
    background: #3566a1;
    display: inline-block;
}

.currentTab{ background: #f4aa8a;}

 bArr: ["阴道镜", "妇科检查", "HPV E6 / E7mRNA ", "液基细胞学 ", "HPV - DAN分型 ", " 病理结果"],
        touchindex: 0,