收藏
回答

在camera组件里cover-view的定位,条件渲染等无效

问题模块
API和组件

做动画效果和条件渲染,显示隐藏等都无法实现。模拟器是可以的。真机不可以。touchstart和touchend事件无法监听,只能监听tap。求大神或者官方说下怎么解决。

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

12 个回答

  • 黄思程
    黄思程
    2017-11-01

    你好,请提供一下能复现问题的简单代码示例。

    目前还不支持touch事件,我们正计划支持,请关注后续版本

    2017-11-01
    赞同
    回复
  • 末。
    末。
    2017-11-01

    <camera class='camera' device-position='{{devicePosition}}' bindstop='cameraClose'>

    <cover-view class="mask">

    <cover-image class="faceMask" mode='aspectFit' src="/asset/images/faceMask.png" />

    </cover-view>

    <cover-view class="tipWrap">

    <cover-view class="tipTitle">

    *{{tipInfo}}

    </cover-view>

    <cover-view class="tipNum">

    <cover-view class="tipNumItem">{{randomNumber[0]}}</cover-view>

    <cover-view class="tipNumItem">{{randomNumber[1]}}</cover-view>

    <cover-view class="tipNumItem">{{randomNumber[2]}}</cover-view>

    <cover-view class="tipNumItem">{{randomNumber[3]}}</cover-view>

    </cover-view>

    </cover-view>

    <cover-view class='recordBtn {{recordIng?"recordIng":""}}' bindtap='changeStatus'>{{btnText}}</cover-view>

    </camera>

    很简单的条件渲染“recordIng”这个样式不能实现。同时定位的位置会有问题。点击后才会恢复正常。都是在ios下不能实现,安卓是可以的

    2017-11-01
    赞同
    回复
  • 黄思程
    黄思程
    2017-11-01

    样式也麻烦提供一下

    2017-11-01
    赞同
    回复
  • 末。
    末。
    2017-11-01

    WXML:

    <camera class='camera' device-position='{{devicePosition}}' bindstop='cameraClose'>

    <cover-view class="mask">

    <cover-image class="faceMask" mode='aspectFit' src="/asset/images/faceMask.png" />

    </cover-view>

    <cover-view class="tipWrap">

    <cover-view class="tipTitle">

    *请依次读出下方数字

    </cover-view>

    <cover-view class="tipNum">

    <cover-view class="tipNumItem">{{randomNumber[0]}}</cover-view>

    <cover-view class="tipNumItem">{{randomNumber[1]}}</cover-view>

    <cover-view class="tipNumItem">{{randomNumber[2]}}</cover-view>

    <cover-view class="tipNumItem">{{randomNumber[3]}}</cover-view>

    </cover-view>

    </cover-view>

    <cover-view class="contorl">

    <cover-view class="cameraBtn left" catchtap='cameraClose'>取消</cover-view>

    <cover-view class="cameraBtn center {{recordStatus == 0?'waitColor':'ingColor'}}" catchtap='record'>

    <cover-image class="cameraImg" mode='aspectFit' src="/asset/images/camera.png" />

    </cover-view>

    <cover-view class="cameraBtn right" catchtap='turnDevice'>翻转</cover-view>

    </cover-view>

    </camera>

    WXSS:

    .camera {

        width: 750rpx;

    height:100vh;

    }


    .mask {

        width: 750rpx;

        height: 1006rpx;

    }


    .faceMask {

        width: 750rpx;

        height: 1006rpx;

    }


    .tipWrap {

        position: fixed;

        left: 100rpx;

        bottom: 115px;

    }


    .tipWrap .tipTitle {

        font-size: 30rpx;

        height: 50rpx;

        line-height: 50rpx;

        width: 300rpx;

        background-color: rgba(0, 0, 0, 0.6);

        border-radius: 10rpx;

        text-align: center;

        color: #fff;

    }

    .tipWrap .tipNum{

        width: 320rpx;

        height: 60rpx;

        margin-top: 30rpx;

    }

    .tipWrap .tipNumItem {

        width: 60rpx;

        height: 60rpx;

        float: left;

        margin-right: 20rpx;

        border-radius: 100%;

        background-color: rgba(0, 0, 0, 0.6);

        color: #fff;

        text-align: center;

        line-height: 60rpx;

    }

    .contorl{

        width: 750rpx;

        height: 100px;

        background-color: rgba(0, 0, 0, 0.9);

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .cameraBtn{

        color: #fff;

    }

    .left{

        color: #1cb2ff;

        font-size: 30rpx;

    }

    .right{

        color: #1cb2ff;

        font-size: 30rpx;

    }

    .center{

        font-size: 60rpx;

        width: 60px;

        height: 60px;

        border-radius:100%;

        margin: 0 160rpx;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .cameraImg{

        width: 60rpx;

        height: 36rpx;

    }

    .waitColor{

        background-color: #1cb2ff;

    }

    .ingColor{

        background-color: #f73434;

    }

    tip:这个是最简单的会出现问题的情况了。点击开始record,打算切换recordStatus的状态控制渲染按钮的背景色。但是在IOS下失败了。在安卓都是可以的。附加一些问题:cover-view的flex布局支持不好。定位在IOS下也会出现错误,触发事件后才会恢复正常定位。测试机IP6,7

    2017-11-01
    赞同
    回复
  • 黄思程
    黄思程
    2017-11-01

    flex布局支持不好,能否提供个有问题的demo

    2017-11-01
    赞同
    回复
  • 黄思程
    黄思程
    2017-11-01

    你好,iOS更新背景色有bug,已知问题,下一版会修复

    2017-11-01
    赞同
    回复
  • 黄思程
    黄思程
    2017-11-01

    除了更新背景色,还有其他问题吗

    2017-11-01
    赞同
    回复
  • 末。
    末。
    2017-11-01

    就这个demo,.tipWrap里面的四个数字tipNum,最开始的时候是使用的flex布局。使用justify-content: space-around;align-items: center;,但是justify-content: space-around;没有生效,所以改用的float;后面测试一下,就是justify-content 这个属性不会生效。

    其他问题的话:touch事件不支持,用IOS下position(absolute和fixed)都是会出错,比预期定位偏上了。如果绑定有事件,点击后定位会恢复正常。


    2017-11-01
    赞同
    回复
  • 黄思程
    黄思程
    2017-11-01

    flex的问题,近期会修复一下,到时请关注是否正常。

    2017-11-01
    赞同
    回复
  • 黄思程
    黄思程
    2017-11-01

    用IOS下position(absolute和fixed)都是会出错,这个能否提供一个可重现代码

    2017-11-01
    赞同
    回复