收藏
回答

cover-view 的flex布局有问题!!!!!

cover-view 布局用flex ,flex-direction: column   不生效!



wxml


<map style='width:750rpx;'>

<cover-view class='w1'>

<cover-view class='w2'>

1

</cover-view>

<cover-view class='w2'>

2

</cover-view>

<cover-view class='w2'>

3

</cover-view>

<cover-view class='w2'>

4

</cover-view>

<cover-view class='w2'>

5

</cover-view>

<cover-view class='w2'>

6

</cover-view>

</cover-view>

</map>



wxss


.w1{

width: 750rpx;

height: 300px;

background-color: wheat;

display: flex;

display: -webkit-flex;

flex-direction: column;

}

.w2{

width: 750rpx;

height: 50px;

background-color: yellow;

border-bottom: 2px red solid;

}


效果:


回答关注问题邀请回答
收藏

17 个回答

  • 马仔
    马仔
    2018-02-01

    啊?这么尴尬?这我就不清楚了,你问官方吧!

    2018-02-01
    有用
    回复
  • 杰,
    杰,
    2018-02-01

    只在oppo手机上会出现这个问题,其他手机都是正常的。我刚刚用最简单的demo试过了,在oppo上还是有问题

    2018-02-01
    有用
    回复
  • 马仔
    马仔
    2018-02-01

    肯定梳理你代码啦!组件是没问题的!你实在觉得混乱,就自己另外写个小例子,里面用上cover-view,再用flex布局!!

    2018-02-01
    有用
    回复
  • 杰,
    杰,
    2018-02-01

    梳理我自己的代码?还是梳理您贴在这里的代码?能告诉我具体是什么原因吗

    2018-02-01
    有用
    回复
  • 马仔
    马仔
    2018-02-01

    解决了!自己梳理下代码吧!

    2018-02-01
    有用
    回复
  • 杰,
    杰,
    2018-02-01

    请问这个问题解决了吗?遇到同样的问题

    2018-02-01
    有用
    回复
  • 杰,
    杰,
    2018-02-01

    请问这个问题解决了吗?我遇到同样的问题

    2018-02-01
    有用
    回复
  • 马仔
    马仔
    2017-12-14

    ,我直接拷你代码的,你自己看,有什么问题!!


    2017-12-14
    有用
    回复
  • 暴风雪
    暴风雪
    2017-12-14

    wxml

    <map id="map"

         latitude="{{currentLocation.latitude}}"

         longitude="{{currentLocation.longitude}}"

         scale="{{scale}}"

         bindregionchange="bindregionchange"

         polyline="{{polyline}}"

         markers="{{markers}}"

         controls="{{controls}}"

         bindmarkertap="bindmarkertap"

         bindcontroltap="bindcontroltap"

         show-location>

      <cover-view class="container">

        <cover-view class="top-block flex-column">

          <!-- 搜索栏 开始 -->

          <cover-view class="search-block">

            <cover-view class="flex-row flex-row-space-between">

              <cover-view class="float-button"><cover-image src="{{'../../assets/images/icons/icon-mine.png'}}"></cover-image></cover-view>

              <cover-view class="search-wrapper" url="/pages/search/search">

                <cover-image src="{{'../../assets/images/icons/icon-search.png'}}"></cover-image>

                <cover-view>搜索</cover-view>

              </cover-view>

              <cover-view class="float-button"><cover-image src="{{'../../assets/images/icons/icon-filter.png'}}"></cover-image></cover-view>

            </cover-view>

          </cover-view>

          <!-- 搜索栏 结束 -->

          <!-- 消息栏 开始 -->

          <cover-view class="message-block">

            <cover-view class="flex-row flex-row-space-between">

              <cover-view class="float-button"><cover-image src="{{'../../assets/images/icons/icon-message.png'}}"></cover-image></cover-view>

            </cover-view>

          </cover-view>

          <!-- 搜索栏 结束 -->

        </cover-view>

      </cover-view>

    </map>


    wxss

    /**

     * 纵向从上往下排列(顶对齐)

     * <div class="fx-column"></div>

     */

    .flex-column {

      display: -webkit-box;

      display: -webkit-flex;

      display: -moz-flex;

      display: -ms-flexbox;

      display: flex;

      width: 100%;

      -webkit-box-direction: normal;

      -webkit-box-orient: vertical;

      -webkit-flex-direction: column;

      -moz-flex-direction: column;

      -ms-flex-direction: column;

      flex-direction: column; }

    /**

     * 向从左到右排列(左对齐)

     * <div class="flex-row"></div>

     */

    .flex-row {

      display: -webkit-box;

      display: -webkit-flex;

      display: -moz-flex;

      display: -ms-flexbox;

      display: flex;

      width: 100%;

      -webkit-box-direction: normal;

      -webkit-box-orient: horizontal;

      -webkit-flex-direction: row;

      -moz-flex-direction: row;

      -ms-flex-direction: row;

      flex-direction: row; }

    .flex-row-space-between {

      -webkit-box-pack: justify;

      -ms-flex-pack: justify;

      -webkit-justify-content: space-between;

      -moz-justify-content: space-between;

      justify-content: space-between; }

    map {

      position: absolute;

      left: 0;

      top: 0;

      right: 0;

      bottom: 0;

      width: 100%;

      height: 100%;

      z-index: 1; }

    cover-view {

      overflow: visible;

      line-height: normal;

      white-space: inherit;

      pointer-events: auto; }

    .container {

      position: relative;

      width: 100%;

      height: auto;

      display: flex;

      justify-content: space-between; }

      .container .float-button {

        z-index: 1000;

        background: #FFFFFF;

        box-shadow: 0 4px 12px 0 rgba(31, 51, 153, 0.2);

        width: 72rpx;

        height: 72rpx;

        line-height: 72rpx;

        text-align: center;

        vertical-align: center;

        font-size: 16px;

        border-radius: 60rpx; }

        .container .float-button cover-image {

          margin: 10rpx;

          width: 52rpx;

          height: 52rpx; }

      .container .top-block {

        justify-content: flex-start; }

        .container .top-block .search-block {

          width: 100%;

          padding: 17rpx 24rpx;

          display: block; }

          .container .top-block .search-block .search-wrapper {

            z-index: 1000;

            display: block;

            text-align: center;

            width: 480rpx;

            height: 72rpx;

            line-height: 62rpx;

            background: #FFFFFF;

            box-shadow: 0 4rpx 12rpx 0 rgba(31, 51, 153, 0.2);

            border-radius: 60rpx; }

            .container .top-block .search-block .search-wrapper cover-image {

              height: 40rpx;

              width: 40rpx;

              font-size: 28rpx;

              vertical-align: middle;

              margin: 0 5rpx; }

            .container .top-block .search-block .search-wrapper .cover-image {

              display: inline-block;

              height: 24rpx;

              width: 24rpx;

              font-size: 14px;

              color: #B4BBE1;

              margin: 0 5rpx; }

            .container .top-block .search-block .search-wrapper text {

              vertical-align: middle;

              margin: 0 5rpx;

              font-size: 28rpx;

              color: #B4BBE1;

              line-height: 29rpx; }

        .container .top-block .message-block {

          align-self: flex-start;

          z-index: 1000;

          padding: 17rpx 24rpx;

          display: block; }

      .container .bottom-block {

        justify-content: flex-start; }

        .container .bottom-block .refresh-block {

          align-self: flex-start;

          padding: 17rpx 24rpx;

          display: block; }

        .container .bottom-block .ask-block {

          padding: 17rpx 24rpx; }

          .container .bottom-block .ask-block .ask-button {

            z-index: 1000;

            width: 240rpx;

            height: 94rpx;

            background: #3F5FFF;

            box-shadow: 0 12px 24px 0 rgba(0, 25, 153, 0.2);

            border-radius: 70px;

            text-align: center;

            vertical-align: middle;

            line-height: 94rpx; }

            .container .bottom-block .ask-block .ask-button cover-image {

              width: 45rpx;

              height: 45rpx; }

            .container .bottom-block .ask-block .ask-button text, .container .bottom-block .ask-block .ask-button .text {

              font-size: 32rpx;

              color: #ffffff;

              line-height: 40rpx; }

          .container .bottom-block .ask-block .reward-button {

            z-index: 1000;

            width: 88rpx;

            height: 88rpx;

            background-size: cover;

            text-align: center; }

            .container .bottom-block .ask-block .reward-button text, .container .bottom-block .ask-block .reward-button .text {

              width: 20rpx;

              height: 60rpx;

              font-size: 20rpx;

              color: #FFFFFF;

              line-height: 20rpx; }


    2017-12-14
    有用
    回复
  • 马仔
    马仔
    2017-12-14

    能直接上代码么?

    2017-12-14
    有用
    回复

正在加载...

登录 后发表内容