camera视野上叠加的按钮,开发者工具上可显示,但手机上却不能显示?
开发者工具版本:[图片] 宿主操作系统:win10 任务目标:在camera视野上显示叠加的按钮 开发者工具上截屏(“设置”按钮可以正常显示): [图片] 手机上截屏(“设置”按钮没能显示): [图片] 进一步调试:将camera组件中的参数“width”改为50%,则“设置”按钮出现。这个测试表明手机上不能显示的原因是camera视野将“设置”挡住了。请问这个问题如何解决? 【wxml代码】 <view class="page-body"> <view class="page-body-wrapper"> <camera device-position="back" flash="off" frame-size="large" binderror="error" style="width: 100%; height: 1000rpx;"></camera> <view class="btn-area"> <button type="primary" bindtap="takePhoto">拍照</button> </view> </view> </view> <view class="status-box"> <label>已拍:{{imgNum}}</label> </view> <view class="setting-box"> <navigator url="/pages/settings/settings" open-type="navigate">设置</navigator > </view> 【wxss代码】 .page-body { padding: 20rpx 0; } .page-body-wrapper { z-index: -1; display: flex; flex-direction: column; align-items: center; width: 100%; } .setting-box { height: 100rpx; width: 100rpx; background-color: transparent; border-radius: 100%; position: fixed; top: 30rpx; right: 10rpx; display: flex; align-items: center; justify-content: center; z-index: 9; border: 5rpx solid #fff; } .setting-box navigator { font-size: 32rpx; max-width: 80rpx; color: #fff; text-align: center; } .status-box { background-color: transparent; position: absolute; top: 30rpx; left: 10rpx; display: flex; align-items: center; justify-content: center; /*z-index: 9;*/ border: 5rpx solid #fff; color: #fff; font-size: 32rpx; }