刚接触微小程序开发,直接上代码。
显示效果:
如果去掉父容器的高度,就会发现它是竖着排列的,是bug吗?
scroll-view 无法横向显示?scroll-view cannot be displayed horizontally?
scroll-view 无法横向显示?刚接触微小程序开发,直接上代码。
显示效果:
如果去掉父容器的高度,就会发现它是竖着排列的,是bug吗?
Just contact micro program development, directly on the code. Display effect: if you remove the height of the parent container, you will find that it is arranged vertically. Is it a bug?
回答:
<scroll-view class="container" scroll-x="{{true}}"> <view class="box"> <view class="view">1</view> <view class="view">2</view> <view class="view">3</view> <view class="view">4</view> </view></scroll-view>
.container { border: 1px solid black; width: 100px; height: 100px;}.container .box { display: flex; flex-direction: row; flex-wrap: nowrap;}.container .box .view { width: 100px; height: 100px; text-align: center; line-height: 100px; flex-shrink: 0;}.container .box .view:nth-child(1) { background-color: red;}.container .box .view:nth-child(2) { background-color: green;}.container .box .view:nth-child(3) { background-color: blue;}.container .box .view:nth-child(4) { background-color: yellow;}
原文出处:scroll-view 无法横向显示?
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。