刚刚做了个需求，遇到了坑，需要在小程序里做多个导航功能，达到设计师的效果。这个应用在APP里也很常见，毕竟屏幕只有那么宽，要放很多个导航标签，只能采用滚动，我们先来了解如何实现滚动。
首先跟PC和H5一样，我们必须在外部的标签加样式，例如：
WXML
<view class='cen-tabs-con'>
<scroll-view scroll-x>
<view id='{{index}}' class='cen-tabs-item {{currentTab == index ? "tabstadus":""}}' wx:for='{{tabs}}' wx:key="*this" bindtap='itemClick'>{{item}}</view>
</scroll-view>
</view>
我们实现向左滚动，首页到scroll-view滚动标签，向左滚动的话，我们加上属性scroll-x。来看下样式代码，如下：
WXSS
//外部box
.cen-tabs-con{
position:relative;
width:690rpx;
font-size:0;
height:90rpx;
text-align:center;
white-space:nowrap;
overflow:hidden;
}
//元素item
.cen-tabs-item{
display:inline-block;
width:25%;
line-height:1.6;
font-size:32rpx;
height:90rpx;
color: #151515;
}
注：跟PC和H5一样，外部BOX样式主要在于white-space:nowrap和overflow:hidden两个，强制不换行并且超出BOX隐藏，然后BOX内的元素并排display:inline-block（可用其他方法）。
然后在手机预览下效果，发现滚动的时候发现，跟PC和H5一样的问题：默认底部会有个实线的滚动条，如下图：
这个效果很难接受的，尤其是到了设计师和产品那，完全不能通过。我们知道，处理这个问题在PC和H5中一般比较麻烦，需要用到插件，或者写很多代码，但是在微信小程序里，我们只需要一段CSS代码就可以搞定，如下：
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
其实原理就是把滚动条的宽高都设置为0，颜色也没了，这样看上去就的效果就完美了。
不知道您有遇到这样的情况吗，赶紧去试一试吧。
