收藏
回答

iphone x 隐藏view组件,但是它子camera不会隐藏

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

- 当前 Bug 的表现(可附上截图)

隐藏view以后,camera的cover-view会隐藏,但是,camera本身还是全屏显示

- 预期表现

预期表现是camera也隐藏

- 复现路径


- 提供一个最简复现 Demo

<!--拍照上传-->

<view>

 <view hidden='{{!(showIndex == 4)}}'>

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

     <cover-view class="controls">

       <cover-view class="play">

         <button bindtap='tokePhoto' style="width: 50%; background-color: #7ED321;">拍照</button>

       </cover-view>

     </cover-view>

   </camera>

 </view>

 <view class="flex-wrp" style="flex-direction:row;" hidden='{{!(showIndex == 1)}}'>


   <view class="flex-wrp" style="flex-direction: row;">

     <view style="width:50%;">

       <button bindtap='jypz' class="navi-span">

         <text>交易凭证</text>

       </button>

     </view>

     <view>

       <button bindtap='hgz' class="navi-span">

         <text>合格证</text>

       </button>

     </view>

   </view>

 </view>

 <view hidden='{{!(showIndex == 2)}}'>

   <div class="weui-cells weui-cells_form">

     <picker mode="date" bindchange="jypzDatePicker">

       <div class="weui-cell">

         <div class="weui-cell__hd">

           <label for="" class="weui-label">日期</label>

         </div>

         <div class="weui-cell__bd" style="padding-left: 10px;">

           <input class="weui-input" type="date" value="{{jypzDate}}">

           </input>

         </div>

       </div>

     </picker>


     <div class="weui-cell">

       <div class="weui-cell__hd">

         <label for="" class="weui-label">交易凭证</label>

       </div>

       <div class="weui-cell__bd" style="padding-left: 10px;" >

         <image wx:if="{{jypzImg}}" src='{{jypzImg}}' mode="aspectFit"

           style="width: 180px; height: 90px; background-color: #eeeeee;"

           bindtap='psJypz'></image>

         <button bindtap='showCamera' data-zpty='2'

           style="width: 14vh; height: 8vh; display:inline; padding-left: 10px;" >取景框</button>

       </div>

     </div>


     <div class="weui-cell">

       <button bindtap='cancel'>取消</button>

       <button bindtap='submitJypz'>提交</button>

     </div>

   </div>

 </view>


 <view hidden='{{!(showIndex == 3)}}'>

   <div class="weui-cells weui-cells_form">

     <picker mode="date" bindchange="hgzDatePicker">

       <div class="weui-cell">

         <div class="weui-cell__hd">

           <label for="" class="weui-label">日期</label>

         </div>

         <div class="weui-cell__bd" style="padding-left: 10px;">

           <input class="weui-input" type="date" value="{{hgzDate}}">

           </input>

         </div>

       </div>

     </picker>


     <div class="weui-cell">

       <div class="weui-cell__hd">

         <label for="" class="weui-label">商品编码</label>

       </div>

       <div class="weui-cell__bd" style="padding-left: 10px;">

         <input class="weui-input" bindblur="bindGoodsCode"></input>

       </div>

     </div>


     <div class="weui-cell">

       <div class="weui-cell__hd">

         <label for="" class="weui-label">合格证</label>

       </div>

       <div class="weui-cell__bd" style="padding-left: 10px;">

         <image wx:if="{{hgzImg}}" src='{{hgzImg}}' mode="aspectFit"

           style="width: 180px; height: 90px; background-color: #eeeeee;"></image>

         <button bindtap='showCamera' data-zpty='3'

            style="width: 14vh; height: 8vh; display:inline; padding-left: 10px;" >取景框</button>

       </div>

     </div>


     <div class="weui-cell">

       <button bindtap='cancel'>取消</button>

       <button bindtap='submitHgz'>提交</button>

     </div>

   </div>

 </view>

</view>



// pages/pzsc/pzsc.js

import {

 formatTime

} from '../../utils/util.js'


const app = getApp()


Page({


 /**

  * 页面的初始数据

  */

 data: {

   showIndex: 1,

   pzType: 1,

   hgzDate: formatTime(new Date()),

   jypzDate: formatTime(new Date()),

   hgzImg: null,

   jypzImg: null,

   goodsCode: '',

   cameraContext: null

 },


 authCamera: function(e) {

   app.authScope({

     scope: 'scope.camera',

     success: (res) => {

       console.log('res', res)

     },

     fail: (res) => {

       console.log('res', res)

     },

   })

 },


 bindGoodsCode: function(e) {

   this.setData({

     goodsCode: e.detail.value

   })

 },


 showCamera: function(e) {

   let pzType = e.target.dataset.zpty

   pzType = parseInt(pzType)

   this.setData({

     showIndex: 4,

     pzType: pzType

   })

 },


 tokePhoto: function() {

   let pzType = this.data.pzType

   console.log('pzType', pzType)

   let cameraContext = this.data.cameraContext

   cameraContext.takePhoto({

     success: (res) => {

       let imgSrc = res.tempImagePath

       console.log('imgSrc', imgSrc)

       if (pzType == 2) {

         this.setData({

           jypzImg: imgSrc

         })

       } else {

         this.setData({

           hgzImg: imgSrc

         })

       }

       this.setData({

         showIndex: pzType

       })

     }

   })

 },


 cancel: function() {

   this.setData({

     showIndex: 1

   })

 },


 submitJypz: function() {

   this.setData({

     showIndex: 1

   })

 },


 submitHgz: function() {

   this.setData({

     showIndex: 1

   })

   let imgSrc = this.data.hgzImg

   console.log('imgSrc', imgSrc)

 },


 hgzDatePicker: function(e) {

   let hgzDate = e.detail.value

   this.setData({

     hgzDate: hgzDate

   })

 },


 jypzDatePicker: function(e) {

   let jypzDate = e.detail.value

   this.setData({

     jypzDate: jypzDate

   })

 },


 jypz: function() {

   this.setData({

     showIndex: 2

   })

 },


 hgz: function() {

   this.setData({

     showIndex: 3

   })

 },


 /**

  * 生命周期函数--监听页面加载

  */

 onLoad: function(options) {

   let cameraContext = wx.createCameraContext(this)

   this.setData({

     cameraContext: cameraContext

   })

 }

})


最后一次编辑于  2018-10-22
回答关注问题邀请回答
收藏

2 个回答

  • 卖小萌
    卖小萌
    2019-01-14

    我也出现了这个问题,官方到现在还没修复好吗?view隐藏了,但是子节点下的camera  却还是显示在页面上隐藏不了。偶然会出现这种情况,出现频率有时候有点多。请问一下这个问题是否在跟进中?

    2019-01-14
    有用
    回复
  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2018-10-22

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

    2018-10-22
    有用
    回复 1
    • 曱熊
      曱熊
      2018-10-23

      已解决,setData()函数一次只设置一个值,就不会出现这问题了。顺便吐槽一下:开发工具,代码跟文件不同步,真的很难受,会会多出来很多不是bug的bug

      2018-10-23
      回复
登录 后发表内容