uni-app中scroll-view组件正确使用方法

在制作小程序的时候，我们普遍使用uni-app来进行制作，其中scroll-view组件使用频率很高，但实话实说，官方文档那个示例给的简直丧心病狂，按照那个示例你根本搞不出一个简单的滚动效果。

经过测试，主要问题在以下两个方面：

横向滚动不生效
横向滚动不生效的问题是因为少了两行代码：
white-space: nowrap; 使用在scroll-view的class中
display:inline-block; 使用在里边滚动的class中

纵向滚动 必须指定滚动区域的高度。
不设置高度的话，scroll-view是不会滚动的，此时滚的是页面。

<view class=”scroll”>
<scroll-view class=”scroll-view” scroll-x>
<view class=”class_tiem”><image src=”../../static/dbr.webp”></image></view>
<view class=”class_tiem”><image src=”../../static/chanpin.webp”></view>
<view class=”class_tiem”><image src=”../../static/dbr.webp”></view>
</scroll-view>
</view>

 

style样式中：

.scroll-view{
white-space:nowrap;

}
.class_tiem{
display:inline-block;

}

这样就可以生效了，简直坑啊。。