camera使用wx:if第一次显示正常,隐藏后再次显示后,会出现很大的黑边
发布于 5 年前 作者 nzhu 8794 次浏览 来自 问答

camera使用wx:if第一次显示正常,隐藏后再次显示后,会出现很大的黑边,影响业务功能实现。

测试机型:iPhone 11 ,IOS 13.5.1 ,会出现这种问题。

使用一个安卓手机测过,不会出现这问题。

js代码

// camera.js
Page({
    data: {
        visible: false,
    },
    onClose(e) {
        this.setData({
            visible: false,
        });
    },
    openCamera() {
        this.setData({
            visible: true,
        });
    },
    takePhoto() {
        this.cameraContext.takePhoto({
            quality: 'high',
            success: (res) => {
                this.setData({
                    src: res.tempImagePath,
                });
            },
        });
    },
    error(e) {
        console.log(e.detail);
    },
    initdone(e) {
        this.cameraContext = wx.createCameraContext();
    },
});

wxml 代码

<camera wx:if="{{visible}}" device-position="back" frame-size="medium" flash="auto" bindinitdone="initdone" binderror="error" style="width: 100%; height: 50vh;position:absolute;top:0;left:0;z-index:9;"></camera>
<cover-view wx:if="{{visible}}" style="position:fixed;bottom:0;left:0;width:100%;height:50vh;z-index:9;">
    <cover-view bind:tap="takePhoto" style="margin-top:20px;border:3px solid #484848;border-radius: 50%;width:50px;height: 50px;margin-left: auto;margin-right:auto;background-color: transparent;position: relative;"></cover-view>
    <cover-view wx:if="{{visible}}" style="position: absolute;top:20px;left:20px;z-index: 10;font-size: 10px;display: flex;justify-content: center;align-items:center;width:40px; height: 40px;color: #484848;border:1px solid #909090; border-radius: 50%;" bind:tap="onClose">关闭</cover-view>
</cover-view>
<button bind:tap="openCamera">拍照</button>

截图(第一张是正常的,第二张:关闭后再显示出现黑边问题)

1 回复

你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

回到顶部