uniapp开发04-scroll-view组件的简单案例

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;//不换行

这个设置在父级元素里面，目的是为了让子元素不要换行展示。（超过了屏幕的尺寸宽度后，默认是会换行的！我们不允许它换行！就需要这种设置。）