本文分享一些用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: , //初始化时滚动至x
startY: , //初始化时滚动至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=; 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 < ){
mui.toast('请选择');
return false;
}
mui.toast(res);
} //封装的方法 获取多选框的数据
function getcheckBoxRes(className){
var rdsobj = document.getElementsByClassName(className);
var checkVal = new Array();
var $k = ;
for(i = ; 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(, , )
});
dtPicker.show(function (selectItems) { })

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

移动端mui常用方法的更多相关文章

  1. 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

    一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...

  2. JS(移动端)自己封装移动端一些常用方法

    /** * Created by Administrator on 2016/7/14. */ /*命名空间*/ window.lcf = {}; /*监听过渡结束的方法*/ lcf.transiti ...

  3. pc端js常用方法

    var common = {}; /** * [pageMask ajax统一请求] * @return {[type]} [description] */ common.pageMask = fun ...

  4. React Native布局详解

    Flexbox 布局 Flex有两个属性:Container  和 Item flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.采用fle ...

  5. 利用MUI滑动进行利息计算(移动端APP显示)

    在开发移动端的应用时,会用到很多的手势操作,比如滑动.长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,其中滑动应用是比较常见的应用操作,本篇文章将讲述如何利用滑动改变对应值进行计算 ...

  6. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

  7. 使用mui框架----移动端页面在所有屏幕下自适应

    写移动端怎么会不用到框架呢? 现在比较火的是mui.amaze UI 之类的,mui是现在最灵活轻便的一个框架,能够从pc到移动灵活的自适应, 只需要调用他定义的类名就能使用,非常方便,只是需要自己来 ...

  8. springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装

    springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...

  9. 1:MUI选择器组件抛出“n.getSelectedItem is not a function”异常的解决办法 2:mui三级联动 3:移动端关闭虚拟键盘

    1:如下图 问题:引用了mui的地址选择的三级联动的应用在h5上的组件 百度发现别人思路对 Array 原型链方法扩充时,会抛出这个异常. 修改方法: mui.poppicker.js 第 112 行 ...

随机推荐

  1. 球的序列(formation.*)

      N个编号为1-n的球,每个球都有唯一的编号.这些球被排成两种序列,分别为A.B序列,现在需要重新寻找一个球的序列l,对于这个子序列l中任意的两个球,要求j,k(j<k),都要求满足lj在A中 ...

  2. js 实现栈的结构

    js实现一个栈的数据结构 首先了解一下什么是栈,栈是一个后进先出的一种数据结构,执行起来效率比较高. 对于栈主要包括一些方法,弹出栈pop(),弹出栈顶元素,并删除该元素:压入栈push(),向栈中压 ...

  3. 洛谷 P2548 [AHOI2004]智能探险车

    P2548 [AHOI2004]智能探险车 题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例#1: 复制 4 3 sunny plain full many sunny moun ...

  4. PHP array_flip()

    定义和用法 array_flip() 函数返回一个反转后的数组,如果同一值出现了多次,则最后一个键名将作为它的值,所有其他的键名都将丢失. 如果原数组中的值的数据类型不是字符串或整数,函数将报错. 语 ...

  5. Java修改文件夹名称

    Java修改文件夹名称 学习了:http://blog.csdn.net/yongh701/article/details/45063833 进行文件夹名字批量修改,注意,要写全路径: package ...

  6. Gulp帮你自己主动搞定coffee和scss的compile

    今天继续说说gulp的watch,能够自己主动搞定非常多事情.不用每次都去敲命令了! 上次说到用gulp能够非常方便的进行css,js,html的压缩.而且能够对coffee和scss进行编译. cs ...

  7. Linuxpassword破解及grub加密演示

    password破解及grub加密演示 so easy,不可不会! 原理: 通过进入单用户模式(单用户模式也即是仅仅有一个用户能够訪问资源的状态,且单用户模式就是系统处于最原始的状态,大部分服务还未开 ...

  8. 阻尼滑动--能够滑动过度的ScrollView(OverScrollView)

    贴上一个我自己用过的阻尼滑动的ScrollView,像QQ里面那种滑动效果,尽管不是我写的,可是我认为还能够,贴出来做个记录,实用到的时候免得到处去找. 代码例如以下: /* * Copyright ...

  9. luogu1631 序列合并

    题目大意 有两个序列A,B,在A和B中各取一个数相加能得到$n^2$个和.求出这些和前n小的数字. 题解 首先这道题不可以用自己想的什么A序列B序列各两个指针的自己发明的模拟算法,用这样的算法只能是绝 ...

  10. mongodb 3.2配置内存缓存大小为MB/MongoDB 3.x内存限制配置

    mongodb 3.2配置内存缓存大小为MB/MongoDB 3.x内存限制配置 转载自勤奋的小青蛙 mongodb占用内存非常高,这是因为官方为了提升存储的效率,设计就这么设计的. 但是大部分的个人 ...