小程序导航滚动

scroll-view
文档里有说明。
我中间就遇到了这个问题，不管我怎么弄不会出现滚动，超出的部分会折行掉下去！
后来我发现scroll-view下的子级必须要 displau:inline-block;否则无效不会出现滚动。

<scroll-view scroll-x="true"  class="navList" scroll-with-animation scroll-left="{{scrollLeft}}"  >
   <view 
    wx:for="{{navList}}" 
    wx:key="{{index}}" 
    bindtap="tabSelect" 
    wx:for-item="item"
    data-id="{{index}}"
    data-livesortid="{{item.livesortid}}"
    class="{{index==TabCur?'active':''}}">{{item.sort_name}}</view>
  </scroll-view>

scroll-x 是容许横向滚动出现， scroll-left是滚动条距离左边的位置

Page({
	data:{
		scrollLeft:0,
		TabCur:0
	}
	// 点击tab
  tabSelect(e) {
    // console.log(e)
    //TabCur 第几个tab 给添加样式
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id - 1) * 60,
    })
  },
})

.navList{
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  white-space: nowrap;
  border-bottom: 1px solid #E5E5E5;
  margin-top: 30rpx;
  overflow: hidden;
}
.navList view{
  padding: 0 10rpx;
  display: inline-block;
  height: 68rpx;
  line-height: 68rpx;
  font-size: 30rpx;
  color: #999999;
  margin:0  40rpx;
  position: relative;
  z-index: 999;
}
.navList .active{
  border-bottom: 1px solid #FAE259;
  color: #FAE259;
}

效果

如果没有出现预期的效果就是你样式的不对，这个是小程序官方出的功能标签。
注意里面包含的子节点样式！

display: inline-block;

父节点

white-space: nowrap;
overflow: hidden;

这两不能缺少！
子级点不能加float:left;