Hbuilder mui使用问题总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/haoyuexihuai/article/details/79293526

1.三个div并排，中间input，使用float不再一层

div层

<div class="title">
    <div class="left"><img src="../img/index_left.png" style="width: 33px;height: 33px;"></div>
    <div class="right">
        <a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
    </div>
    <div class="center">
        #主要是top=-35px，将层往上移动
        <div class="mui-input-row mui-search" style="top:-35px">
            <input type="search" class="mui-input-clear" placeholder="">
        </div>
    </div>
</div>

css样式

.left {
    /*background-color: green;*/
    float: left;
    width: 35px;
}

.right {
    /*background-color: yellow;*/
    float: right;
    width: 35px;
    margin-top: 5px;
}

.center {
    /*background-color: red;*/
    margin: 0 37px;
    height: 35px;
    /*padding-top: 0px;*/
}

2.iso手机input框需要点两次才出来输入框

看到网上解决办法是因为input包含在层中了
在mui-search外面包含了id=pullrefresh（下拉刷新作用），class=mui-scroll-wrapper之后就会出现这个bug。别的控件不知道有没有这个现象，我用到的就是这个。原理应该是mui-placehold绝对定位之后在iOS端产生事件穿透导致的。
解决办法，CSS：

.mui-search .mui-placeholder {
    pointer-events: none;
}

3.事件监听不灵敏，做了一个多选的 选择/反选 按钮，点击速度快了，就反应不过来了，一开始用的 addEventListener('tap'),，后来改成addEventListener('click')就反应速度相当快了。

        checkall = document.getElementById("specialtyitemsALL");
        checkall.addEventListener('click', function() {
            obj = document.getElementsByName("specialtyitems");
            for(k in obj) {
                if(obj[k].checked == true)
                    obj[k].checked = false;
                else
                    obj[k].checked = true;
            }
        });

4.读取json数据并生成html

数据格式：https://www.sojson.com/api/gongan/sina.com.cn

{
    "data": {
        "id": "11000002000016",
        "sitename": "新浪网",
        "sitedomain": "sina.com.cn",
        "sitetype": "交互式",
        "cdate": "2016-01-21",
        "comtype": "企业单位",
        "comname": "北京新浪互联信息服务有限公司",
        "comaddress": "北京市网安总队",
        "updateTime": "2017-09-09"
    },
    "status": 200
}

mui.getJSON('https://www.sojson.com/api/gongan/sina.com.cn', null, function(data) {
    document.getElementById("response").innerHTML = data.data.sitename;
}

主要是JSON.stringify将Json数据转换成了字符串，无法直接取出其中的数据，获取值直接使用data.data.sitename

// 定义json变量
var json ={username:"杨朝来",sex:1,age:25,birthday:"1990-08-21",phonenumber:13812345678,disease:"肺小结节",insurance:1,avatar:"images/male.png"};
// json变量转化成json字符串
var jsonstr =JSON.stringify(json);
// 存储json字符串
window.localStorage.setItem("jsonkey",jsonstr);
// 取出json字符串
var jsonstr =window.localStorage.getItem("jsonkey");
// 还原json对象
var json =JSON.parse(jsonstr);
// 取出json里面的username
var username =json.username;