收藏
回答

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;

}



最后一次编辑于  08-10  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

9 个回答

  • 卢霄霄
    卢霄霄
    08-10

    camera 同层渲染还没到呢 用cover-view吧

    08-10
    赞同 11
    回复 7
    • 零时零刻
      零时零刻
      08-10
      非常感谢您的解答。时间所限,我未完整阅读开发文档就开始做。https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html谈到了您说的这个点。 弱弱问一下下一个问题: 设置 这样改了以后“设置”两字还是没有显示出来,请问需要如何修改,非常感谢!
      08-10
      赞同
      回复
    • 卢霄霄
      卢霄霄
      08-10回复零时零刻
      cover-view里不能放navigator ,改成bindtap在js里用wx.navigateTo跳转吧
      08-10
      赞同
      回复
    • 零时零刻
      零时零刻
      08-10
      好的,非常感谢。也就是用button组件来替换,对吧!
      08-10
      赞同
      回复
    • 卢霄霄
      卢霄霄
      08-10回复零时零刻
      你只是跳转的话。。都行啊。。cover-view也有点击事件
      08-10
      赞同
      回复
    • 零时零刻
      零时零刻
      08-10
      您说的对的,cover-view也可绑定。您寥寥数语,帮了我大忙,非常感谢!
      08-10
      赞同
      回复
    查看更多(2)
  • 零时零刻
    零时零刻
    08-10

    贴一下代码:

    <cover-view class="setting-box">

    <navigator style="cover-view" url="/pages/settings/settings" open-type="navigate">设置</navigator >

    </cover-view>

    这样改了以后“设置”两字还是没有显示出来,请问需要如何修改,非常感谢!

    08-10
    赞同
    回复
问题标签