收藏
回答

scroll-view及内部子元素flex的各种属性均失效

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug scroll-view 客户端 7.0.3 iPad,ios 11.3

- 当前 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



最后一次编辑于  05-10
回答关注问题邀请回答
收藏

2 个回答

  • Maverick
    Maverick
    05-10

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


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


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

    05-10
    赞同 1
    回复 3
    • 快看三九煎蛋
      快看三九煎蛋
      05-10

      呃,刚刚发现,那么没有办法通过自适应给scroll-view高度,只能通过计算了么?

      05-10
      回复
    • Maverick
      Maverick
      05-10回复快看三九煎蛋

      用flex啊,flex-shrink flex-grow flex-basis还是有效的。

      05-10
      回复
    • 快看三九煎蛋
      快看三九煎蛋
      05-10回复Maverick

      scroll-view绝对定位,在外包裹的view相对定位,目前我是这么做的

      05-10
      回复
  • 快看三九煎蛋
    快看三九煎蛋
    05-10

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

    05-10
    赞同
    回复