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

更新日期: 2020-05-04 阅读次数: 1226 字数: 187 分类: 微信小程序

想自定义微信小程序 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 组件全屏显示

领取618阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年06月11日 中国人口日
2020年06月20日 世界难民日
2020年06月21日 父亲节
2020年06月21日 夏至
2020年06月22日 中国儿童慈善活动日
2020年06月23日 国际奥林匹克日
2020年06月25日 全国土地日
2020年06月25日 端午节
2020年06月26日 国际禁毒日
2020年06月30日 世界青年联欢节
2020年07月01日 中国共产党诞生日
2020年07月01日 香港回归日
查看更多节日