2019-02-08 mui小记

右对齐:

class="span-price mui-pull-right"

块级按钮:

class="mui-btn mui-btn-block"

$是mui的别名
最简单的跳转某个页面

mui(function(){
                var regTap = document.getElementById('reg');
                regTap.addEventListener('tap',function(event){
                    console.log('点击了注册账号');
                    mui.openWindow({
                        url:'main.html',
                        id:'main'
                    });
                });
            });

导航条颜色

mui.init({
                statusBarBackground: '#f7f7f7'
            });

设置a标签链接字体颜色

.link-area a{
                color: #C7C7CC;
            }

去掉group这类的边框线

.mui-input-group:after,
.mui-input-group:before{
                height: 0px;
            }

设置全屏背景颜色

.mui-content{
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: white;
            }

通过id定位到控件

#l{
    width: 70%;
   }

页面滑动控制

<script src="js/mui.js"></script>
        <script type="text/javascript">
            mui.init();
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0006 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });

        </script>

控件的显示与隐藏

var nav_right_btn = document.getElementById('changeUI');
nav_right_btn.classList.add('mui-hidden');//隐藏
nav_right_btn.classList.remove('mui-hidden');//显示
nav_right_btn.classList.add(‘mui-visibility’);//显示2

修改图片的大小

解决方法：把img标签的mui-media-object去掉，然后再用css改变图片大小
<img class="mui-pull-left" src="img/left_user.png" id="left_user_img">
#left_user_img{
  width: 100px;
  height: 100px;
}

图片叠加显示

<div id="login_logos_name">
    <img src="img/login_bg_logo.png" id="login_bg_logo">
    <img src="img/login_logo.png" id="login_logo">
    <label id="login_name">登录</label>
</div>

#login_logos_name{
    position: relative;//父视图必须
    margin-top: 100px;
}
#login_bg_logo{
    width: 100%;
    height: 105px;
    margin-top: 50px;
}
#login_logo{
    top: 10px;//这里是top不是margin-top
        left:50px;//top用了之后必须要补充left,相当于x，y
    position: absolute;//子视图必须
    width: 195px;
    height: 55px;
}

iphoneX以上的安全区域颜色介绍

https://www.html.cn/archives/8224

延迟执行

setTimeout("testFunction()","6000"); 方法和毫秒
setInterval("testFunction()","6000");//每隔6000毫秒执行一次testFunction()函数，执行无数次。
varinterval = window.setInterval("testFunction()","6000");

window.clearInterval(interval);    //停止执行setInterval循环。
当我们想让testFunction()函数每隔6000毫秒执行一次，执行10000毫秒后停止执行时，可以用两者三者结合使用来实现。

varinterval2 = window.setInterval("testFunction2()",6000);
setTimeout(function() {window.clearInterval(interval2);},10000);