关于scroll-viwe使用align-items:center的问题

在使用微信小程序的scroll-view组件时,遇到设置flex布局后内容被覆盖的问题。原因是scroll-x属性导致底部出现无形的滚动条占位,移除此属性问题消失,但影响滚动功能。目前无特定解决方案,建议避免在scroll-view中使用flex布局,以免遭遇未知bug。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

描述

今天遇到了一个很奇怪的问题,找了好久终于找出来问题了
在使用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,会导致你怀疑自己所学的知识的,啥时候官方修复了在用吧~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值