您的当前位置:首页正文

小程序 scroll-view flex布局下align-items和gap无效

2024-11-30 来源:个人技术集锦
<scroll-view scroll-x="{{ true }}" 	enable-flex="{{ true }}">
  <view wx:for="{{ typeList }}" wx:key="id">{{ item.name }}</view>
</scroll-view>
scroll-view {
    display: flex;
    height: 100rpx;

    /* 无效 */
    /* align-items: center;   */
    /* gap: 30px; */

    justify-content: space-between;
    background-color:red;
}

view {
    /* 设置行高实现垂直居中 */
    line-height: 100rpx; 
}

换一种布局方式

<scroll-view scroll-x="{{ true }}">
  <view class="scrollBox">
    <view wx:for="{{ typeList }}" wx:key="id">{{ item.name }}</view>
  </view>
</scroll-view>
scroll-view {
    background-color: red;
    padding: 0 30rpx;
    box-sizing: border-box;
}
.scrollBox {
    display: flex;
    white-space: nowrap;
    gap: 30rpx;
    height: 80rpx;
    align-items: center;
}
显示全文