微信小程序scroll-view不能横行显示的问题，以及隐藏scroll-view滚动条

最近因为项目需要，不定期的总结点东西，还有开发遇到的各种坑和大家分享下吧。

我想在页面顶部展示种类的tab，从后台动态获取并显示出来，自己也了解一些微信的小组件，就感觉scroll-view挺适合，然后就去官网API文档找找。微信官方给的 scroll-view 组件说明，只说了  “使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height。”  那么横行滚动弄上就需要给 scroll-view 设置一个 widht 呗，照着样子弄，但是并不能横行。自己实验了下，纵行滚动没毛病，但横行就出现问题了。然后一阵捣鼓都不知何处出了问题，后来结合微信的小程序示例和Github上的官方demo，这才解决了问题。

自己的页面代码是这样的

<scroll-view class="scrolltab" scroll-x="true">
    <block wx:for="{{categoryList}}"  wx:key="*this">
      <view data-index="{{index}}" bindtap="clickItem" class="scrolltab item"><view>{{item}}</view></view>
    </block>
</scroll-view>

 wxss样式如下：

.scrolltab{
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.scrolltab .item{
  background-color: pink;
  width: 25%;
  height: 100%;
  text-align: center;
  color: #FFF;
  font-size: 35rpx;
}
.scrolltab .item view{
  background-color: red;
  width: 80%;
  height: 100%;
  padding-top: 15rpx;
}

 然后结果是这样的

问题的解决其实是这样的

1、scroll-view的子控件样式需要添加属性     display: inline-block;  （听说是一种可占多行的块级元素）   

解决横行显示问题，然后就是这样的了

 2、想要scroll-view横行可滚动，需要在scroll-view的布局样式wxss下面添加      

white-space: nowrap;（文本不换行，在同一行显示）

然后这个问题就解决了,最终效果如下

 

隐藏scroll-view的滚动条

通过在wxss样式里面添加下列代码就能解决

::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}