微信小程序横向滚动,如何高度自适应内容

1,033 阅读1分钟
<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 被挤占。自此终于实现了横向滚动,同时高度自适应内容。