iphone x 隐藏view组件,但是它子camera不会隐藏
发布于 5 年前 作者 yanwang 8876 次浏览 来自 问答
  • 当前 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

   })

 }

})

2 回复

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

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

回到顶部