scroll-view 无法横向显示?

小程序 文章 2022-04-07 18:20 391 0 全屏看文

AI助手支持GPT4.0

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?

回答:

社区技术运营专员-horanzhou:

请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

再见,电脑崽:
<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;}


再见,电脑崽:或者弃用enable-flex可以这么写:
再见,电脑崽:
再见,电脑崽:flex-shrink: 0;  这个是必须的

-EOF-

AI助手支持GPT4.0