微信小程序开发 scroll-view enable-flex失效的解决方法

方法1：

在外盒子<scroll-view>使用white-space: nowrap来禁止子盒子换行，需要将子盒子设置为行内块级元素display: inline-block，这个方法无法设置子盒子之间的间距 margin属性会失效

• 页面结构（.wxml）

<!-- 内容区 --><scroll-view class="recommendScroll" scroll-x><view class="scollItem"><image src="" alt=""></image><text></text></view><view class="scollItem"><image src="" alt=""></image><text></text></view></scroll-view>

• 样式(.wxss)

/* 推荐内容区 */
.recommendScroll {
    white-space: nowrap;margin: 20rpx 0;
}
.scollItem {
    display: inline-block; width: 200rpx;height: 300rpx;margin-right: 20rpx;/*无效*/
}

方法2：

官方文档中介绍enable-flex用于启用 flexbox 布局，开启后当前节点声明了 display: flex 就会成为 flex container。但是直接设置外盒子<scroll-view>的样式为display无法到达预期效果，此时只需要在子盒子外层包裹一个view，在该view上设置display: flex 就可以了

• 页面结构（.wxml）

<!-- 内容区 --><scroll-view class="recommendScroll" scroll-x enable-flex><view class="scrollview" ><view class="scollItem"><image src="" alt=""></image><text></text></view><view class="scollItem"><image src="" alt=""></image><text></text></view></view> </scroll-view>

• 样式(.wxss)

/* 推荐内容区 */
.recommendScroll {
    margin: 20rpx 0;
}
.scrollview {
    display: flex;
}
.scollItem {
    width: 200rpx;height: 300rpx;margin-right: 20rpx;/*有效*/
}

Reference