<view style="height: 120px; width: 100%; background-color: aqua; display: flex; align-items: center; justify-content: center;">A</view><view style="height: 100px; width: 100%; background-color: yellowgreen; display: flex; align-items: center; justify-content: center;">B</view><view style="height: 150px; width: 100%; background-color: wheat; display: flex; align-items: center; justify-content: center;">C</view>
<swiper style="height: 150px"><swiper-item><view style="height: 120px; width: 100%; background-color: aqua; display: flex; align-items: center; justify-content: center;">A</view></swiper-item><swiper-item><view style="height: 100px; width: 100%; background-color: yellowgreen; display: flex; align-items: center; justify-content: center;">B</view></swiper-item><swiper-item><view style="height: 150px; width: 100%; background-color: wheat; display: flex; align-items: center; justify-content: center;">C</view></swiper-item></swiper>
swiper 方案的缺点是因为内部 item 都是 position: absolute 无法占用高度,所以父容器要显式设定 150px。
<view style="display: flex; flex-direction: row; overflow: auto;"><view style="height: 120px; flex-shrink: 0; width: 100%; background-color: aqua; display: flex; align-items: center; justify-content: center;">A</view><view style="height: 100px; flex-shrink: 0; width: 100%; background-color: yellowgreen; display: flex; align-items: center; justify-content: center;">B</view><view style="height: 150px; flex-shrink: 0; width: 100%; background-color: wheat; display: flex; align-items: center; justify-content: center;">C</view></view>
用 view 的 overflow: auto 可以出滚动条。而且也可以自适应内容的高度。但是滚动条位置不可以设置初始值,也无法编程控制。
<scroll-view enable-flex scroll-x style="display: flex; flex-direction: row; height: 150px;"><view style="height: 120px; flex-shrink: 0; width: 100%; background-color: aqua; display: flex; align-items: center; justify-content: center;">A</view><view style="height: 100px; flex-shrink: 0; width: 100%; background-color: yellowgreen; display: flex; align-items: center; justify-content: center;">B</view><view style="height: 150px; flex-shrink: 0; width: 100%; background-color: wheat; display: flex; align-items: center; justify-content: center;">C</view></scroll-view><view>=====</view>
用 scroll-view 之后可以控制滚动条,但是 enable-flex 又再次使得高度无法自适应内容,导致必须显式设定 150px 高度。
<scroll-view scroll-x style="white-space: nowrap;"><view style="height: 120px; width: 100%; background-color: aqua; display: inline-flex; align-items: center; justify-content: center;">A</view><view style="height: 100px; width: 100%; background-color: yellowgreen; display: inline-flex; align-items: center; justify-content: center;">B</view><view style="height: 150px; width: 100%; background-color: wheat; display: inline-flex; align-items: center; justify-content: center;">C</view></scroll-view><view>=====</view>
用 white-space: nowrap 代替 flex-direction: row 之后,因为无需开启 enable-flex 从而 scroll-view 无法自适应内容高度的 bug 被规避了。
<view style="display: flex"><view style="width: 2em;"/><scroll-view scroll-x style="white-space: nowrap;">abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg</scroll-view><view style="width: 2em;"/></view><view>=====</view>
但是 white-space: nowrap 又会导致 flex child 被撑大的问题。
<view style="display: flex"><view style="width: 2em; flex-shrink: 0;"/><scroll-view scroll-x style="white-space: nowrap; overflow: hidden;">abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg</scroll-view><view style="width: 2em; flex-shrink: 0;"/></view><view>=====</view>
这个时候需要显式设定 flex-shrink: 0,避免 flex child 撑大,导致其他 flex child 被挤占。自此终于实现了横向滚动,同时高度自适应内容。