scroll-view 横向滚动无效解决方法

scroll-view 横向滚动无效解决方法

scroll-view 横向滚动无效解决方法

1. 给scroll-view 设置固定高度 【必须】

2. 给scroll-view 样式添加 white-space: nowrap;属性【必须】

3. 在scroll-view下的子模块设置 display: inline-block; 属性或 display: inline-table【必须】

4. 在scroll-view下的子模块设置不得设置 float: left;

5. 在scroll-view 上设置属性 scroll-x=”true” 横行滚的许可。

<scroll-view class="scroll" scroll-x="true">
<div class="divs" > 
  </div>
</scroll-view>

.scroll{
width: auto;
height: auto;
white-space: nowrap;
}
.divs{
width: auto;
height: auto;
/* float: left; 不得设置浮动*/
display: inline-block; 
}