微信小程序 scroll-view 横向不滚动/隐藏滚动条

1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示；

2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的；

3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排；

4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap;

5.有时候为了美观要隐藏滚动条，需要在样式里加上

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

最后的代码如下：

<view class='scroll-box'>
  <scroll-view scroll-x class='index-nav-scroll'>
    <view wx:for="{{nvaIndex}}" id='{{index}}' class='index-nav-view'>{{item}}</view>
  </scroll-view>
</view>

.scroll-box {
  position: fixed;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid #d1d4d4; 
  border-bottom: 1px solid #d1d4d4;
  color: #515151;
}
.index-nav-scroll {
  width: 100%;
  height: 75rpx;
  line-height: 75rpx;
  padding: 8rpx 0rpx;
}
.index-nav-view {
  display: inline-block;
  margin: 0rpx 22rpx;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}