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;
}
效果:
目测有其它的 css 影响了你这边的 demo
直接复制代码后在开发者工具上的效果,是否是期望的结果?
这个是开发者工具上的截图?
我也遇到类似的问题, 这是开发者工具上面的, 这是真机调试。
这是CSS代码
我也遇到类似的问题, 这是开发者工具上面的, 这是真机调试。
这是CSS代码
<!--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代码
啊?这么尴尬?这我就不清楚了,你问官方吧!
只在oppo手机上会出现这个问题,其他手机都是正常的。我刚刚用最简单的demo试过了,在oppo上还是有问题
肯定梳理你代码啦!组件是没问题的!你实在觉得混乱,就自己另外写个小例子,里面用上cover-view,再用flex布局!!
梳理我自己的代码?还是梳理您贴在这里的代码?能告诉我具体是什么原因吗
解决了!自己梳理下代码吧!
请问这个问题解决了吗?遇到同样的问题
请问这个问题解决了吗?我遇到同样的问题