描述
今天遇到了一个很奇怪的问题,找了好久终于找出来问题了
在使用scroll-view组件的时候,给组件设置flex布局,但是B往上移动,明显看到内容被覆盖了
<scroll-view class="s" scroll-x
scroll-top="{{29}}" enable-flex>
<block wx:for="{{5}}">
<view class="a">
<view class="b"></view>
</view>
</block>
</scroll-view>
css
.s {
display: flex;
align-items: center;
}
.a {
flex-shrink: 0;
width: 110px;
margin-right: 20rpx;
}
.b {
height: 110px;
background-color: #faa;
border-radius: 8px;
}
如果把scoll-x删除的话,问题就没有了,但是这样怎么移动呢,就很扯,找了很久也没找到为啥,官方难道没有发现bug吗,
大胆的猜测一下,当设置了scroll-x
的时候,会明显在底部多出一点空白(上面图片的A),这个空白应该就是滚动条的位置了,虽然看不见,但是会占位,把原本的内容往上挤了,然后我就设置了align-items:flex-start
解决
这个没啥具体的解决方案,还是要看需求的 就比如我这个,我需要显示完整的,我就align-items:flex-start
主要是防止大家掉坑里,知道这个坑就行~~
记得双击么么哒~
补充==================================================
在scroll-view
组件里面尽量不要使用flex布局,因为会有很多意想不到的bug,会导致你怀疑自己所学的知识的,啥时候官方修复了在用吧~~