小程序横向滚动问题

<scroll-view scroll-x="true" :scroll-left="scrollLeft" class="head">
   <div @click="changeTab(index,item.id)" :class="[nowIndex==index ?'active':'']" v-for="(item, index) in navData" :key="index">        
        {{item.name}}      
    </div>
</scroll-view>
//对子元素设置浮动都没用,父元素使用flex布局也是不行的
//需要如下设置
//父元素
.head{
  white-space: nowrap;
}
//子元素如下设置,这样设置后就可以横向滚动了
.item{
  display: inline-block;
}