小程序
小游戏
企业微信
微信支付
扫描小程序码分享
做动画效果和条件渲染，显示隐藏等都无法实现。模拟器是可以的。真机不可以。touchstart和touchend事件无法监听，只能监听tap。求大神或者官方说下怎么解决。
12 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
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 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 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 class="cameraBtn right" catchtap='turnDevice'>翻转</cover-view>
</camera>
WXSS：
.camera {
width: 750rpx;
height:100vh;
}
.mask {
height: 1006rpx;
.faceMask {
.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;
float: left;
margin-right: 20rpx;
border-radius: 100%;
line-height: 60rpx;
.contorl{
height: 100px;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
.cameraBtn{
.left{
color: #1cb2ff;
.right{
.center{
font-size: 60rpx;
width: 60px;
height: 60px;
border-radius:100%;
margin: 0 160rpx;
.cameraImg{
height: 36rpx;
.waitColor{
background-color: #1cb2ff;
.ingColor{
background-color: #f73434;
tip:这个是最简单的会出现问题的情况了。点击开始record，打算切换recordStatus的状态控制渲染按钮的背景色。但是在IOS下失败了。在安卓都是可以的。附加一些问题：cover-view的flex布局支持不好。定位在IOS下也会出现错误，触发事件后才会恢复正常定位。测试机IP6，7
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
*{{tipInfo}}
<cover-view class='recordBtn {{recordIng?"recordIng":""}}' bindtap='changeStatus'>{{btnText}}</cover-view>
很简单的条件渲染“recordIng”这个样式不能实现。同时定位的位置会有问题。点击后才会恢复正常。都是在ios下不能实现，安卓是可以的
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
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
<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下不能实现，安卓是可以的