MUI开发过程问题记录
—- 本文不一定全为原创,旨在记录备用,如有侵权等请联系删除!
1.金额校验
// 校验金额方法
function check(obj){
var val =obj.value;
var regStrs = [
['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上,但首位为0
['[^\\d\\.]+$', ''], //禁止录入任何非数字和点
['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点
['^(\\d+\\.\\d{2}).+', '$1'] //禁止录入小数点后两位以上
];
for(i=0; i<regStrs.length; i++){
var reg = new RegExp(regStrs[i][0]);
obj.value = obj.value.replace(reg, regStrs[i][1]);
}
}
2.修改底部tab-bar颜色
<style type="text/css">
.mui-bar-tab .mui-tab-item.mui-active{
color: red;
}
</style>
3.内联播放
/*这个问题曾困扰我很久,需求是 不允许显示拖动条,不能拖拽播放
android端没问题
ios端会被系统播放器拦截,显示系统播放器控制条,导致可以进行拖拽播放
解决办法:
1.video标签下 加入playsinline属性
2.清单文件minifest文件plus标签下添加"allowsInlineMediaPlayback": true,
*/
<video playsinline id="video" autoplay="autoplay" preload="auto" poster="../images/shipin.png" width="100%" height="100%">
</video>
"plus": {
"allowsInlineMediaPlayback": true,
...
}
4.图片居中样式
/*头像四角圆弧*/
.img-circle {
border-radius: 5px;
/*border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;*/
height: 80px;
width: 80px;
}
.topbg{
background: url(../images/me/personal-topbj.jpg);
background-size: 100% 100%;
width: 100%;
height: 200px;
position: relative;
}
.imgbg{
width: 80px;
width: 80px;
top: 50%;
left: 50%;
position: absolute;
margin-left: -40px;
margin-top: -40px;
}