最近在写一个项目,碰到的问题还挺多,不难但都挺琐碎的,其中ios机型兼容是真的让人头疼。
1: IOS transform:rotate失效
这个问题是最让我让人头疼啊!!!!!因为要实现一个这样的语音播放效果,由于UI没有切gif动图!!!所以我就只能上手css写,就是三个div,旋转使用到了tranform、rorate、animation。废话少说,直接上代码.
function WiFiCss(props) {
return <div className="voice-cont" style={{ overflow: 'hidden' }}>
<div className="voice first"></div>
<div className="voice second" style={props.hide ? { animation: 'none' } : {}}></div>
<div className="voice third" style={props.hide ? { animation: 'none' } : {}}></div>
</div>
}
.voice-cont {
width: 25px;
height: 25px;
position: relative;
transform: rotate(135deg);
overflow: hidden;
}
.voice {
box-sizing: border-box;
border: 2px solid #333;
border-radius: 50%;
position: absolute;
}
.first {
width: 5px;
height: 5px;
left: 22px;
top: 22px;
background-color: #333;
}
.second {
width: 12px;
height: 12px;
left: 17px;
top: 17px;
animation: fade 1s linear .2s infinite;
}
.third {
width: 20px;
height: 20px;
left: 12px;
top: 12px;
animation: fade 1s linear .4s infinite;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
上面这段代码,在浏览器包括我的华为手机都展示的非常的完美,很流畅,正当我非常开心以为我可以收工的时候。我拿另一台ios12去测试,结果发现transform: rotate(135deg失效,看了半天,看博客有人说是因为perspective视角的问题,所以我给voice-cont的父元素添加了transform: perspective(1000),然后再去看,发现在这台ios手机上没问题了。
我又一次以为我可以完美收工,今天可以准点下班的时候。测试一脸苦闷的走过来和我说:“我真的不是故意的,我真的只是随便顺手拿了这台iPhone6测试了下,我为什么要拿这台手机点一下????”我发现所有的录音播放动态效果全部失效,而且页面还飘逸了。
立马调试手机,查看控制台。发现了原因。因为我所有的列表都有下拉刷新的功能,如下图。在iphone6这台手机上,在我滑动页面的时候,class="am-pull-to-refresh-content am-pull-to-refresh-transition" 会自动添加transform: translate3d(0px, 0px, 0px) 这个css(后面发现,所有的机型包括浏览器都会自动加上这个属性)。我自动去掉就可以发现iPhone6这个页面飘逸的问题解决了。但与此同时,我使用了伪类元素before,用了绝对定位position:absolute,带来了z-index失效的问题。
累了,累了,累了!一波未平一波又起!
最后发现连带问题太多,所以只能从根源上解决问题,不使用transform,录音动态播放效果,改成使用定时器轮询播放三张图片来实现。但后面因为临近上预发,所以这台手机iPhone6被记上了,等待下一波修改。而且还发现了最致命的一个事情,不是所有的iPhone6有这个问题,是iPhone6 12点多的系统才出现了这种问题,其他版本的手机没问题,我心里真**一句脏话郁结于心啊!!!心情如下
2. IOS软键盘收起后整体页面往上移,UI错位
解决办法很简单,因为页面被顶上去没有滚动下来,所以我们在收起键盘的时候,手动将页面滑下来就行
window.scrollTo(0,0)
3. 一些常用的但不熟悉的代码
3.1 隐藏滚动条
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
3.2 超出多少行隐藏
overflow: hidden;
/* autoprefixer:ignore next*/
-webkit-line-clamp: 1;
/* autoprefixer:on */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
max-height: 40px;
display: -webkit-box;
3.3 Textarea去除默认样式
resize: none;
outline: none;
border: none;
appearance:none;
3.4 修改软键盘发送按键文字
<input enterkeyhint="enter"> 换行
<input enterkeyhint="done">换行
<input enterkeyhint="go">前往
<input enterkeyhint="next">下一项
<input enterkeyhint="previous">换行
<input enterkeyhint="search">搜索
<input enterkeyhint="send">发送
3.5 react阻止事件冒泡
//需要注意的是,这段代码要加到不需要被触发的元素上
e.nativeEvent.stopImmediatePropagation()
e.stopPropagation()
3.6 border渐变
//需要注意,h5上无效,h5上还是单独写一个div来实现吧!
border-right: 1px solid;
border-image: -webkit-linear-gradient(#F8F8F8 , #AAA , #F8F8F8)1 10 1; /* 控制边框颜色渐变 */
border-image: -moz-linear-gradient(#F8F8F8 , #AAA , #F8F8F8)1 10 1;
border-image: linear-gradient(#F8F8F8 , #AAA , #F8F8F8)1 10 1; /* 标准的必须写在最后 */
4. h5实现录音播放功能
这次项目除了ios兼容,剩下的就是这个录音功能的问题最头疼了,具体交互已经实现效果和微信语音差不多,实现效果不难,主要是语音之间播放的问题比较多点。比如: 1.切换点击语音要暂停之前的语音,之前的语音在没有播放完的情况下显示“继续播放” 2.语音自动播放完暂停播放效果 3.暂停播放语音显示“继续播放”
<>
<div className="message-voice" onClick={() => judgeAudioPlay(i)}>
{val.isPlaying ? <WiFiCss /> : <img src="https://static.aistarfish.com/front-release/file/F2022042717573510900008268.编组(1).png" alt="" />}
<span className="span-len" style={!val.isPlaying ? { marginLeft: 0 } : {}}>{val.voiceLen}″</span>
{val.isEnded ? null : <span className="span-text">继续播放</span>}
</div>
<div style={{ display: 'none' }}>
<audio
id={`audio-${i}`}
src={val.voiceUrl}
controls="controls"
onPlaying={() => onTimeUpdate(i, 'onPlaying')}//开始播放,只执行一次
onTimeUpdate={() => onTimeUpdate(i, 'onTimeUpdate')}//播放开始,轮询的
onEnded={() => onTimeEnded(i)} //播放结束
onPause={() => {//暂停播放
console.log('onPause', i)
console.log(onTimeEnded(i, 'pause'))
}}
></audio>
</div>
</>
总结
这个项目不难,但确实麻烦的事很多!只想说原世界再无iPhone6