scroll-view横向滚动

Posted on | Edited on | In |

最近学习小程序开发,遇到scroll-view横向滚动不了的问题,google之后解决了问题,下面记录一下

项目中遇到的问题

不符合需求的布局效果图(/desktop/note/scroll-view1.jpeg)

wxml文件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 未来48小时天气预报 -->
<view class="hours-container">
<view class="hours-section">未来48小时天气预报</view>
<view class="line-hor"></view>
<scroll-view class="scroll-view_H" scroll-x="true">
<block wx:for="{{[1,2,3,4,5,6,7,8]}}">
<view class="hours-item">
未来48小时天气预报
<view class="line-ver disp-inlineBlock"></view>
</view>
</block>
</scroll-view>
</view>

wxss文件代码

1
2
3
4
5
6
7

.hours-item {
background-color: white;
}
.scroll-view_H {
white-space: nowrap;
}

问题解决

给hours-item添加display: inline-block;样式就好了