微信小程序scroll-view横向滚动

<scroll-view scroll-x style="height:100rpx;white-space:nowrap">
      <view wx:for="{{one}}" style="display:inline-block;width:100rpx;margin-left:20rpx;">{{item}}        </view>
</scroll-view>

条件：
1.在scroll-view标签使用nowrap;目的：当scroll-view里边的内容太长时，保证在一行内容纳，之前误区是我看到容器内长度太长时会自动换行，就给scroll-view设置了width,结果底下的也会滚动。

2.容器内项使用display:inline-block

3.scroll-view标签使用scroll-x=‘true’