收藏
回答

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 个回答

  • Special
    Special
    2017-11-24

    目测有其它的 css 影响了你这边的 demo

    2017-11-24
    有用
    回复
  • Special
    Special
    2017-11-24


    直接复制代码后在开发者工具上的效果,是否是期望的结果?

    2017-11-24
    有用
    回复
  • Special
    Special
    2017-11-24

    这个是开发者工具上的截图?

    2017-11-24
    有用
    回复 3
    • 长伴左手
      长伴左手
      2018-06-26

      我也遇到类似的问题, 这是开发者工具上面的, 这是真机调试。


      这是CSS代码

      2018-06-26
      回复
    • 长伴左手
      长伴左手
      2018-06-26

      我也遇到类似的问题, 这是开发者工具上面的, 这是真机调试。


      这是CSS代码

      2018-06-26
      回复
    • 长伴左手
      长伴左手
      2018-06-26

      <!--pages/push/push.wxml-->

      <view style="width:100%;height: 100%; background-color: black;">

      <view style="width:100%;height:100%;">

      <live-pusher

      style="width:100%; height: 100%;"

      id="camera-push"

      mode="{{mode}}"

      autopush

      orientation="{{orientation}}"

      beauty="{{beauty}}"

      whiteness="{{whiteness}}"

      muted="{{muted}}"

      waiting-image="https://mc.qcloudimg.com/static/img/daeed8616ac5df256c0591c22a65c4d3/pause_publish.jpg"

      background-mute="{{backgroundMute}}"

      url="{{pushUrl}}"

      enable-camera="{{enableCamera}}"

      debug="{{debug}}"

      hidden="{{hide}}"

      bindstatechange="onPushEvent">

      <!-- 顶部按钮 -->

      <cover-view class="hg-top">

      <cover-image src='../../utils/images/v_1.png'></cover-image>

      <cover-image src='../../utils/images/v_2.png'></cover-image>

      <cover-image src='../../utils/images/v_3.png'></cover-image>

      </cover-view>

      <!-- 水平方向的按钮 -->

      <cover-view wx:if="{{!playing || playing}}" style="width:100%; height: 120px; position:absolute;bottom:30px;" >

      <cover-view class='bottom_box'>      

      <cover-image class="bottom_button" src="../../utils/images/head.png" bindtap='onPushClick'></cover-image>

      </cover-view>

      <cover-view class='flex-align-justify pl-20 pr-20 mt-20'>

      <cover-view>

      <cover-view class='hgSpan'>00</cover-view> <cover-view class='hgSpan hg-br'>:</cover-view>  <cover-view class='hgSpan'>02</cover-view> <cover-view class='hgSpan hg-br'>:</cover-view><cover-view class='hgSpan'>54</cover-view>

      </cover-view>

      <cover-view class='btn hg-btn pd-10 flex-align' bindtap='endLive'><cover-image src='../../utils/images/end.png'></cover-image> 结束直播</cover-view>

      </cover-view>

      <!-- <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/camera.png" bindtap='onSwitchCameraClick'></cover-image>

             <cover-view class='bottom_text'>翻转</cover-view>

           </cover-view>

           <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/{{beauty == 0 ? 'beauty-dis':'beauty'}}.png" bindtap='onBeautyClick'></cover-image>

             <cover-view class='bottom_text'>美颜</cover-view>

           </cover-view>

           <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/{{mode == 'HD'? 'HD':mode == 'FHD'?'super':'SD'}}.png" bindtap='onSwitchMode'></cover-image>

             <cover-view class='bottom_text'>{{mode == 'HD'? '高清':mode == 'FHD'?'超清':'标清'}}</cover-view>

           </cover-view>

           <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/{{muted?'mic-dis':'mic'}}.png" bindtap='onMuteClick'></cover-image>

             <cover-view class='bottom_text'>声音</cover-view>

           </cover-view>

           <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/{{enableCamera?'off':'camera-dis'}}.png" bindtap='onEnableCameraClick'></cover-image>

             <cover-view class='bottom_text'>摄像头</cover-view>

           </cover-view>

           <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/{{orientation == 'vertical'?'portrait':'landscape'}}.png"  bindtap='onOrientationClick'></cover-image>

             <cover-view class='bottom_text'>{{orientation == 'vertical'?'竖屏':'横屏'}}</cover-view>

           </cover-view> -->

      </cover-view>

      </live-pusher>

      </view>

      </view>


      这是wxml代码

      2018-06-26
      回复
  • 马仔
    马仔
    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
    有用
    回复

正在加载...

登录 后发表内容