iphone x 隐藏view组件,但是它子camera不会隐藏
- 当前 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 }) } })