本文分享一些用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. mybatis源码阅读-初始化六个工具(六)

    六个基本工具图集 图片来源:https://my.oschina.net/zudajun/blog/668596 ObjectFactory 类图 接口定义 public interface Obje ...

  2. 超经典SQL练习题,做完这些你的SQL就过关了

    使用方法:我用的数据库是 Ms SQL Server 2008 ,练习时应当自己建数据,自己先思考,切勿急躁翻答案!否则效果减半,做完这些,恭喜你,你的 SQL 就算过关了. 测试表格 --1.学生表 ...

  3. firdac支持的序列和还原格式

    TFDStorageFormat = (sfAuto, sfXML, sfBinary, sfJSON); FIREDAC支持3种序列格式:XML,JSON和BIN.

  4. joinColumns和inverseJoinColumns的使用方法

    近期在工作中使用springside.里面用到了hibernate的多对多 一開始我在配置department(部门表)和menu(栏目表)的时候.这样写的. Department实体类中的getMe ...

  5. 获取url地址

    用JS获取地址栏参数的方法(超级简单) 采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...

  6. 零基础学python-2.17 文件、open()、file()

    今天我们来说说文件,以及跟文件有关的内建函数open和file 首先我们在python的根文件夹下建一个名为"123"的txt文本文件 文件中面我们输入一些文本 watermark ...

  7. 如何更改iTunes备份地址(修改iphone ipad 备份地址) itunes文件目录修改方法 【亲测有效,附带原理说明】

    前言 C盘空间有限,但是iTunes就是那么龌龊,只能把手机备份存到C盘.那么怎么才能把备份文件存到其他分区的文件夹里面呢? 当时我想先看看度娘,看看有没有现成的! 结果 nnd!! 我看了一大堆相关 ...

  8. commons-fileupload上传文件(1)

    近期,写一个上传图片的功能.于是用到commons-fileupload这个组件.提过form提交表单到后台(这里没实用到structs框架).在后台List pl = dfu.parseReques ...

  9. Android WiFi开发教程(三)——WiFi热点数据传输

    在上一篇文章中介绍了WiFi的搜索和连接,如果你还没阅读过,建议先阅读上一篇Android WiFi开发教程(二)——WiFi的搜索和连接.本篇接着简单介绍手机上如何通过WiFi热点进行数据传输. 跟 ...

  10. PCB 内网实现《OCR文字识别》实现逻辑

    一.实现内网信息获取网络图 二. OCR文字识别,运用技术点(啰嗦了,即然写了就都写了一遍) 三. C#客户端实现界面, 设置界面描述功能待完善,