微信小程序 camera 组件全屏显示

发布时间: 2020-05-04 21:05:36 作者: 大象笔记

想自定义微信小程序 camera 组件的显示,调起摄像头时,为全屏显示。

但是 width 和 height 都设置为 100% 时,实际是无效的。

<camera device-position="back" style="width: 100%; height: 100%;"></camera>

真机测试:

解决方法

height 使用 vh

<camera device-position="back" style="width: 100%; height: 100vh;"></camera>

效果如下:

但是这样还是没达到预期,因为没有 camera 没有占满全屏,顶部的状态栏影响了美观度。

真正的全屏

在 camera.json 中,设置

"navigationStyle": "custom"

即可。最终效果如图:

我是一名山东烟台的开发者,联系作者