uniapp開發04-scroll-view組件的簡單案例！廢話不多說，我們直接上代碼分析。

<!--演示scroll-view組件效果--><scroll-view class="scroll" scroll-x><view class="group"><view class="item">111</view><view class="item">222</view><view class="item">333</view><view class="item">444</view></view></scroll-view>

下面看對應的css內容設置：

.scroll{border:1px solid red;box-sizing: border-box;height: 220rpx;.group{white-space: nowrap;//不換行.item{width: 220rpx;height: 220rpx;background: green;display: inline-block;margin-right: 10rpx;}}}

下面看看對應的實際運行效果。

如圖，確實是正常的可以向左滑動了。第四個子模塊，可以被正常完整的顯示出來。

代碼介紹：

white-space: nowrap;//不換行

這個設置在父級元素里面，目的是為了讓子元素不要換行展示。（超過了屏幕的尺寸寬度后，默認是會換行的！我們不允許它換行！就需要這種設置。）