MUI开发过程问题记录

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;
            }