收藏
回答

IOS端自定义导航栏遮挡横屏video

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug 页面配置navigationStyle 客户端 7.0.3 2.7.4

- 描述

苹果手机会出现Bug,安卓手机测试正常

.json配置文件中navigationStyle设置为custom,当页面中视频组件全屏(横屏)时,导航栏不会隐藏,遮挡住视频(如下图)


- 当前 Bug 截图



- 自定义导航代码片段

<div class="comp-navbar">

<!-- 占位栏 -->

<cover-view class="placeholder-bar" :style="{height: navBarHeight + 'px'}"> </cover-view>

<!-- 导航栏主体 -->

<cover-view class="navbar" :style="{height: navBarHeight + 'px',backgroundColor:navBackgroundColor}">

<!-- 状态栏 -->

<cover-view class="nav-statusbar" :style="{height: statusBarHeight + 'px'}"></cover-view>

<!-- 标题栏 -->

<cover-view class="nav-titlebar" :style="{height: titleBarHeight + 'px' }">

<!-- home及后退键 -->

<cover-view class="bar-options">

<cover-view v-if="backVisible" class="opt opt-back" @click="backClick()">

<cover-image class="back-image" src="/static/images/back.png"></cover-image>

</cover-view>

<cover-view class="line" v-if="backVisible"></cover-view>

<cover-view class="opt opt-home" @click="homeClick()">

<cover-image class="home-image" src="/static/images/home.png"></cover-image>

</cover-view>

</cover-view>

<!-- 标题 -->

<cover-view class="bar-title" :style="[{color:titleColor}]">{{title}}</cover-view>

</cover-view>

</cover-view>

</div>

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

2 个回答

  • 鲤子
    鲤子
    2019-07-10

    因为层级比video高,监听下手机尺寸变化,然后动态显示/隐藏顶部。

    2019-07-10
    有用 1
    回复 2
    • 2019-07-10

      感谢回复的这么及时,请问监听手机尺寸变化要怎么实现?或者说视频横屏(全屏)播放时,哪个尺寸变化了?

      2019-07-10
      回复
    • 鲤子
      鲤子
      2019-07-11回复
      https://developers.weixin.qq.com/miniprogram/dev/api/ui/window/wx.onWindowResize.html
      2019-07-11
      回复
  • WGinit
    WGinit
    2019-07-11

    楼上正解~

    2019-07-11
    有用
    回复 2
    • 2019-07-11
      可是我视频横屏的时候没监听到啊。。疑惑。。
      2019-07-11
      回复
    • WGinit
      WGinit
      2019-07-11
      监听姿势不对?
      2019-07-11
      回复
登录 后发表内容