收藏
回答

scroll-view下,scroll-x 跟flex-direction冲突?

问题模块
API和组件

原本在view下,效果是这样的



RT 一共8个区, 希望能横向滑动,于是把最外层view 改成 scroll-view,结果是这样

第二个区及后面的区匪夷所思地竖向排列了??

为啥scroll-view干扰了flex布局的横向flex方向..把横向生生变成了竖向??


代码如下

    <scroll-view scroll-left="20rpx"  scroll-x="true" class="head-wrp flex-horizonal" style="height:{{sbscrollview}};display:flex;white-space:nowrap">

        <view bindtap="Tab" data-position="2"  class="head-item {{selected2}}"><text data-position="2">东区</text></view>

        <view bindtap="Tab" data-position="3"  class="head-item {{selected3}}"><text data-position="3">西区</text></view>

        <view bindtap="Tab" data-position="4"  class="head-item {{selected4}}"><text data-position="4">南区</text></view>

    </scroll-view>


在js的page data里  sbscrollview:200rpx


wxss

.head-wrp{

    height: 66rpx;

    position:fixed;

    width: 100%; /*也试过700rpx*/

    display: flex;   

    border-bottom: solid thin green;

}

.head-item{

     font: 30rpx 方正黑体简体 ;

     letter-spacing: 4.32rpx;

     color: #333333;


     width:120rpx; /*也试过12.5%*/

     height: 100%; /*在父元素200rpx生效的情况下,也试过设为200rpx*/

     display: flex;

     align-items: center;

     justify-content: center;

}

flex-horizonal {

    display:flex;

    flex-direction:row; /*这句在view里好好的,在scroll-view里不起作用??*/

    align-items:center;

}


设置父子固定高度、宽度、父子元素white-space:nowrap 、父子display:flex  、填满父元素 全都不起作用

是版本问题么?

开发者工具 v0.17.172600


如果往scroll-view下面再加一层view,倒是可以横向排列,问题是没法scroll了。。

最后一次编辑于  2017-06-15  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • LastLeaf
    LastLeaf
    2017-06-15

    感谢反馈。只有部分节点可用flex布局,其中不包括scroll-view。如果要保证flex布局可用,请使用view节点。

    2017-06-15
    赞同
    回复
  • 白天雪
    白天雪
    2017-06-15

    通过把text前面的view去掉,在scroll-view下只包裹1层view解决了。但scroll-view下也不应该只允许1层view。

    2017-06-15
    赞同
    回复