scroll-view及内部子元素flex的各种属性均失效
发布于 4 年前 作者 yan24 13273 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

红色区域横向滚动,内部多个子元素自右向左排列,使用

  • flex-direction:row;

  • flex-wrap:nowrp;

  • 均失效,scroll-view的子元素不会排列一行;

使用网上查阅到的方法在scroll-view上设置white-space: nowrap不换行,子元素display:inline-block;因需求是自右向左排列,即便目前实现了横向滚动,使用

  • flex-direction:row;

  • flex-wrap:nowrp;

  • 仍然失效的,请问如何避免使用scroll-view横向滚动,子元素自右向左排列使用flex布局如何不失效?

  • 预期表现
  • 红色区域横向滚动,内部多个子元素自右向左排列

  • 复现路径
  • 提供一个最简复现 Demo
2 回复

scroll-view支持设置flex的需求还是已开发待发布状态呢:https://developers.weixin.qq.com/community/develop/issue/78

官方组件或是自定义组件,基本都是Shadow DOM,你写在组件下的直接子元素,渲染时未必是直接子元素。


scroll-view里再加一层view设置flex吧。

因子元素为行内块元素,在scroll-view使用text-align: right;可实现这个需求

回到顶部