收藏
回答

设置camera组件的高度随客户端变化时无效

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug camera 客户端 6.7.3 2.2.5

WXML:

<camera id='myCamera' device-position='{{cameraPosition}}' flash='off' style='width: 100%; height: {{windowHeight-60}}px;'>
  <cover-view class='controls'>
    <cover-image class='camera' src='/res/img/camera.png'  bindtap='takePhoto'/>
    <cover-image class='switchCamera' src='/res/img/refresh.png' bindtap='switchCamera'/>
  </cover-view>
</camera>

JS:

await getSystemInfo().then(res => {
  // success
  that.setData({
    windowWidth: res.windowWidth,
  });
}).catch(res => {
  console.log(res);
});

在开发工具中是正常显示的高度,但在手机上不能正常显示,必须切换到其他页面或者在页面上操作某个事件,引起页面刷新才能正常显示。

最后一次编辑于  2018-12-07  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-白柿子
    社区技术运营专员-白柿子
    2018-11-15

    提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-11-15
    赞同
    回复 4
    • 老刘
      老刘
      2018-12-07

      可以说是任何机型(以小米6为例吧)。另外,代码片段加上了,在提问里

      2018-12-07
      1
      回复
    • 社区技术运营专员-白柿子
      社区技术运营专员-白柿子
      2018-12-07回复老刘

      试着改了一下,是可以啊,测试机型:iPhonexr,微信版本:6.7.4

      2018-12-07
      回复
    • 老刘
      老刘
      2018-12-07回复社区技术运营专员-白柿子

      不知道你的是不是iPhone的缘故,反正我手机上不行。楼上阿斯兰的回复通过变通的方式解决了,希望官方能正面解决这个问题。

      2018-12-07
      1
      回复
    • 饮茶
      饮茶
      03-15

      解决了吗,我也出现这样的问题

      03-15
      回复
  • 白联
    白联
    02-22

    原来这问题这么早就有了 现在还没解决

    02-22
    赞同
    回复 3
    • 阿斯兰
      阿斯兰
      02-22

      对啊对啊,不过 这个问题感觉是因为生命周期的影响

      02-22
      回复
    • 老刘
      老刘
      02-25

      是的,官方很扯...

      这两天出现一个更奇怪的问题,之前可以运行正确的代码,突然不正确了。开发环境上还是正常的,但真机上不正确了。不知道微信小程序平台调整了啥

      02-25
      回复
    • 白联
      白联
      02-26

      我现在复现这个问题也是在开发的真机调试都可以,但是体验版就不行。

      猜测也是 @阿斯兰 所说的生命周期的影响,我是通过 for 来延迟加载解决的这个问题。

      02-26
      回复
  • 阿斯兰
    阿斯兰
    2018-11-27

    放到 onReady 中去动态设置就有了 应该是 在onload 里面  组件还没加载完,所以 动态设置宽高没有效果

    2018-11-27
    赞同
    回复 10
    • 老刘
      老刘
      2018-12-07

      没毛用,你试试就知道了

      2018-12-07
      1
      回复
    • 阿斯兰
      阿斯兰
      2018-12-07回复老刘

      啊,你的没有效果吗 ?我是前几天遇到这个问题,搞了很久 在最终放到 onReady 里面的时候 可以了 小米6 也过了测试

      2018-12-07
      回复
    • 阿斯兰
      阿斯兰
      2018-12-07回复老刘
      <camera mode="scanCode" device-position="back" flash="off" bindscancode="showcode" class='camera' style='height:{{ischange?sanheight:389}}px;'>
          <cover-view class="code-bg" style='top:{{santop}}px;'>
            <cover-image src="/static/img/scode-bg.png" class='scodebg' />
            <cover-view class="line" style='top:{{toprpx}}rpx'></cover-view>
          </cover-view>
        </camera>
      onReady:function(){
          var that = this;
          var sanheight = wx.getSystemInfoSync().windowHeight - 50 - 65;
          that.setData({
            sanheight: sanheight,
            santop: (sanheight - wx.getSystemInfoSync().windowWidth / 750 * 400) / 2
          })
       
          that.setData({
            ischange: true
          })
        },

      这个是我的代码 ,希望对你有帮助,也希望多探讨下,我怕我的在别的机型上也有问题,目前测试了 小米6  华为V9 和苹果 6s 7plus 都没有问题

      2018-12-07
      回复
    • 老刘
      老刘
      2018-12-07回复阿斯兰

      按照你的代码,放到onReady里,还是一样,不能随屏幕高度啊...测试机:小米6(MIUI10.0.2),微信版本:6.7.3


      2018-12-07
      回复
    • 老刘
      老刘
      2018-12-07回复阿斯兰

      不知道是不是你的是模式scanCode的原因,反正我的normal模式是不行的。

      2018-12-07
      回复
    查看更多(5)