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

文章目录

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

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

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

    真机测试:

    • 宽度确实是 100%
    • 但是高度只有屏幕的四分之一

    解决方法

    height 使用 vh

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

    效果如下:

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

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

    真正的全屏

    在 camera.json 中,设置

    "navigationStyle": "custom"
    

    即可。最终效果如图:

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

    关于作者 🌱

    我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式