Skip to content

scroll-view使用enable-flex,竖直方向可能会增加布局空间的高度

微信小程序和uniapp里的scroll-view组件,不要使用enable-flex,如果使用了,在竖直方向可能会增加布局空间的高度

有俩个解决办法:

一、在最外层设置高度。缺点是之后高度变了,还得再次修改

二、去掉enable-flex,在内部加一个view组件,在view组件上设置flex布局(推荐)

<scroll-view scroll-x class="scroll-view">
        <view class="inner">
            <block wx:for="{{spuList}}" wx:key="index">
                <view data-spu-id="{{item.id}}" bind:tap="onTap" class="spu-container">
                    <image class="spu-img" src="{{item.img}}"></image>
                    <text class="spu-text">{{item.title.length>=8?s.substring(item.title,0,7)+'...':item.title}}</text>
                    <l-price
                            l-value-class="price-value"
                            l-unit-class="price-unit"
                            value="{{item.price}}">
                    </l-price>
                </view>
            </block>
        </view>
    </scroll-view>
.scroll-view{
  margin-top:28rpx;
  display:flex;
  flex-direction:row;
}

.inner{
  display:flex;
  flex-direction:row;
}

如有转载或 CV 的请标注本站原文地址