小程序 | camera组件高度为视窗高度

本文介绍了在小程序中使camera组件高度等于视窗高度的三种方法:通过wx.getSystemInfo()获取高度、onReady()动态设置以及使用vh单位。针对不同基础库版本存在的问题进行了讨论,推荐使用vh单位来确保在低版本中也能正确渲染并避免摄像头方向错误。
摘要由CSDN通过智能技术生成

导读:需求是置camera组件高度为屏幕的可编辑高度,因为需要覆盖一张图片在组件在camera上,图片宽度要100%,高度是按照相机的高度进行裁剪

思路1:通过wx.getSystemInfo()获取可视屏幕高度,通过传值到camera组件
 <!-- wxml -->
<camera device-position="front"  flash="off" binderror="error" bindinitdone="initdone" style="height:{
  {windowHeight}}px;width:100%">
 <!-- js -->
wx.getSystemInfo({
      success(res) {
        _this.setData({
          windowHeight: res.windowHeight,
        })
      }
    })

痛点:基础库低于2.7.0的,调用的前置摄像头变成后置摄像头,昨天(20190514)刚好微信更新7.0.4版本,由这一版本开始支持基础库2.7.0,(没找到文档有相关说明,应该是高分比和动态传值设置高度的bug修复了)真机测试已成功可用

思路2:在onReady()动态设置

参考自微信社区:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值