移动端mui常用方法

本文分享一些用Mui的时候所采的坑

1、mui中上拉刷新事件a标签中的链接、元素onclick事件在手机上点击不了

mui('body').on('tap','a',function(){document.location.href=this.href;});

2、mui的横向区域滚动

<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted scroll_topList">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active">
                    推荐
                </a>
                <a class="mui-control-item">
                    热点
                </a>
                <a class="mui-control-item">
                    北京
                </a>
                <a class="mui-control-item">
                    社会
                </a>
                <a class="mui-control-item">
                    娱乐
                </a>
                <a class="mui-control-item">
                    科技
                </a>
            </div>
        </div>

mui('.scroll_topList').scroll({
                    scrollY: false, //是否竖向滚动
                    scrollX: true, //是否横向滚动
                    startX: 0, //初始化时滚动至x
                    startY: 0, //初始化时滚动至y
                    indicators: true, //是否显示滚动条
                    deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
                    bounce: true //是否启用回弹
                });

 3、mui-复选框、单选框、使用js获取选择值

单选框

<div class="mui-input-row mui-radio mui-left">
        <label>运动</label>
        <input name="checkbox1" value="运动" type="radio" class="rds"/>
    </div>

    <div class="mui-input-row mui-radio mui-left">
      <label>篮球</label>
      <input name="checkbox1" value="篮球" type="radio" class="rds"/>
    </div>

<button type="botton" onclick="getVals();">获取复选框的值</button>

/*单选框的请求方法*/
    function getVals(){
        var res = getRadioRes('rds');
        if(res == null){
            mui.toast('请选择');
            return false;
        }
        mui.toast(res);
    }
　　
//封装的方法获取复选款的数据
    function getRadioRes(className){
        var rdsobj = document.getElementsByClassName(className);
        //alert(rdsobj.length);
        var checkVal = null;
        for(i=0; i<rdsobj.length;i++){
            if(rdsobj[i].checked){
                checkVal = rdsobj[i].value;
            }
        }
        return checkVal;
    }

多选框

div class="mui-input-row mui-checkbox mui-left">
        <label>运动</label>
        <input name="checkbox1" value="运动" type="checkbox" class="rdss"/>
    </div>

    <div class="mui-input-row mui-checkbox mui-left">
      <label>篮球</label>
      <input name="checkbox1" value="篮球" type="checkbox" class="rdss"/>
    </div>

<button type="botton" onclick="getVal();">获取多选框的值</button>

/*多选框的触发方法*/
    function getVal(){
        var res = getcheckBoxRes('rdss');
        if(res.length < 1){
            mui.toast('请选择');
            return false;
        }
        mui.toast(res);
    }

//封装的方法 获取多选框的数据
    function getcheckBoxRes(className){
        var rdsobj = document.getElementsByClassName(className);
        var checkVal = new Array();
        var $k = 0;
        for(i = 0; i<rdsobj.length; i++){
            if(rdsobj[i].checked){
                checkVal[$k] = rdsobj[i].value;
                $k++;
            }
        }
        return checkVal;
    }

4、mui引入时间日期组件

var dtPicker = new mui.DtPicker({
                type: 'date',
                beginDate: new Date(1949, 01, 01)
            }); 
dtPicker.show(function (selectItems) { 
                    
                })

mui的日期组件必须引入，mui.picker.min.js 和 mui.picker.min.css。而且必须是带 min 的，带min的和不带min的不一样。下载地址为：用hbuilder 新建hello mui 项目里面所有的都有。