说明为了提高切换窗口的效率，所以会有一个预加载的操作。窗口切换使用到了H5的plusApi，所以一般浏览器不会有效果，最好真机测试官方文档：https://dev.dcloud.net.cn/mui/window/#window窗口切换以底部导航栏作为切换按钮<navclass="mui-barmui-bar-tab"><aid="btn-home"class="mui-tab-itemmui-active"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首页</span></a><aid="btn-phone"class="mui-tab-item"><spanclass="mui-iconmui-icon-phone"></span><spanclass="mui-tab-label">电话</span></a><aid="btn-email"class="mui-tab-item"><spanclass="mui-iconmui-icon-email"></span><spanclass="mui-tab-label">邮件</span></a><aid="btn-gear"class="mui-tab-item"><spanclass="mui-iconmui-icon-gear"></span><spanclass="mui-tab-label">设置</span></a></nav>创建单独页面<headerclass="mui-barmui-bar-nav"><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><h1class="mui-title">邮件</h1></header>l设置首页加载，其他页面预加载<scripttype="text/javascript">mui.init({//主页面subpages:[{url:"views/home.html",id:"home.html",styles:{top:0,//高度是为了留够底部导航栏的位置bottom:"45px"}}],//预加载页面preloadPages:[{url:"views/phone.html",id:"phone.html",styles:{top:0,bottom:"45px"}},{url:"views/email.html",id:"email.html",styles:{top:0,bottom:"45px"}},{url:"views/gear.html",id:"gear.html",styles:{top:0,bottom:"45px"}},],});</script>这时，只能加载首页，并不能切换切换窗口事件<script>//首页事件跟其他的不一样document.getElementById("btn-home").addEventListener("tap",function(){plus.webview.getLaunchWebview().show();});//展示电话页document.getElementById("btn-phone").addEventListener("tap",function(){//通过id获取到预加载的页面varview=plus.webview.getWebviewById("phone.html");plus.webview.show(view);})//展示邮箱页document.getElementById("btn-email").addEventListener("tap",function(){//通过id获取到预加载的页面varview=plus.webview.getWebviewById("email.html");plus.webview.show(view);})//展示设置页document.getElementById("btn-gear").addEventListener("tap",function(){//通过id获取到预加载的页面varview=plus.webview.getWebviewById("gear.html");plus.webview.show(view);})</script>
概述为实现下拉刷新功能，大多数H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况);mui通过使用原生webview下拉刷新解决这个DIV动画的卡顿问题，并且拖动效果更加流畅；官方文档：https://dev.dcloud.net.cn/mui/pulldown/有两种下拉刷新的方式单webview模式当控件拖动到一定位置触发动态加载数据以及刷新操作。此模式下拉刷新，不创建额外webview，性能更优。使用只需要指定一个下拉刷新容器标识即可代码块：mpullrefresh<!--下拉刷新容器--><divid="refreshContainer"class="mui-contentmui-scroll-wrapper"><divclass="mui-scroll">刷新的内容写在这里面</div></div>下拉刷新<scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等down:{style:'circle',//必选，下拉刷新样式，目前支持原生5+‘circle’样式color:'#2BD009',//可选，默认“#2BD009”下拉刷新控件颜色height:'50px',//可选,默认50px.下拉刷新控件的高度,range:'100px',//可选默认100px,控件可下拉拖拽的范围offset:'0px',//可选默认0px,下拉刷新控件的起始位置auto:true,//可选,默认false.首次加载自动上拉刷新一次callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；//下拉刷新的业务逻辑//一般是ajax请求//停止刷新，如果是ajax可以放在，ajax处理完成之后。mui('#refreshContainer').pullRefresh().endPulldown();}}}});</script>小例子刷新成功，创建一个<li><!--下拉刷新容器--><divid="refreshContainer"class="mui-contentmui-scroll-wrapper"><divclass="mui-scroll"><ulid="list"class="mui-table-view"><!--列表--><liclass="mui-table-view-cell">1</li></ul></div></div><!--Js--><scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等down:{style:'circle',//必选，下拉刷新样式，目前支持原生5+‘circle’样式auto:false,//可选,默认false.首次加载自动上拉刷新一次callback:function(){varlist=document.getElementById("list")//创建新的<li>标签varli=document.createElement("li")li.className="mui-table-view-cell"li.innerHTML="刷新成功"list.appendChild(li)//停止刷新，其实是停止刷新的动画mui('#refreshContainer').pullRefresh().endPulldownToRefresh()}}}});</script>双webview模式使用只需要指定一个下拉刷新容器标识即可，容器与上面一样代码块：mpullrefresh<!--下拉刷新容器--><divid="refreshContainer"class="mui-contentmui-scroll-wrapper"><divclass="mui-scroll">刷新的内容写在这里面</div></div>下拉刷新，双webview模式不需要指定style:'circle',<scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等down:{auto:false,//可选,默认false.首次加载自动上拉刷新一次contentdown:"下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容contentover:"释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容contentrefresh:"正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；//下拉刷新的业务逻辑//一般是ajax请求//停止刷新，如果是ajax可以放在，ajax处理完成之后。mui('#refreshContainer').pullRefresh().endPulldown();}}}});</script>小例子刷新成功，创建一个<li><!--下拉刷新容器--><divid="refreshContainer"class="mui-contentmui-scroll-wrapper"><divclass="mui-scroll"><ulid="list"class="mui-table-view"><!--列表--><liclass="mui-table-view-cell">1</li></ul></div></div><scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等down:{auto:true,//可选,默认false.首次加载自动上拉刷新一次contentdown:"下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容contentover:"释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容contentrefresh:"正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；varlist=document.getElementById("list")//创建新的<li>标签varli=document.createElement("li")li.className="mui-table-view-cell"li.innerHTML="刷新成功"list.appendChild(li)//停止刷新，其实是停止刷新的动画mui('#refreshContainer').pullRefresh().endPulldownToRefresh()}}}});</script>上拉加载其实跟下拉刷新差不多，只是变成了on<scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",up:{height:50,//可选.默认50.触发上拉加载拖动距离auto:false,//可选,默认false.自动上拉加载一次contentrefresh:"正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；setTimeout(function(){//停止动画//传入true会提示没有更多数据了this.endPullupToRefresh(true)}.bind(this),500)}}}});</script>小例子<!--下拉刷新容器--><divid="refreshContainer"class="mui-contentmui-scroll-wrapper"><divclass="mui-scroll"><ulid="list"class="mui-table-view"><!--列表--><liclass="mui-table-view-cell">1</li></ul></div></div><scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",up:{height:50,//可选.默认50.触发上拉加载拖动距离auto:false,//可选,默认false.自动上拉加载一次contentrefresh:"正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；setTimeout(function(){//传入true会提示没有更多数据了this.endPullupToRefresh(true)}.bind(this),500)}}}});</script>下拉刷新&上拉加载同时使用，只需要on、down同时定义即可
Div选项卡代码块：mTabSegmented<divclass="mui-content"><divclass="mui-segmented-control"><aclass="mui-control-itemmui-active"href="#item1">选项卡1</a><aclass="mui-control-item"href="#item2">选项卡2</a></div></div>例子:能切换的DIv选项卡锚点的形式的进行切换添加几个样式，在mui-segmented-control添加mui-segmented-control-invertedmui-segmented-control-negativemui-segmented-control-positivemui-segmented-control-vertical<divclass="mui-segmented-control"><!--href锚点--><aclass="mui-control-itemmui-active"href="#item1">选项卡1</a><aclass="mui-control-item"href="#item2">选项卡2</a></div><div><divid="item1"class="mui-control-content">选项卡1的内容</div><divid="item2"class="mui-control-content">选项卡2的内容</div></div>底部选项卡代码块：mtab<navclass="mui-barmui-bar-tab"><aclass="mui-tab-itemmui-active"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首页</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-phone"></span><spanclass="mui-tab-label">电话</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-email"></span><spanclass="mui-tab-label">邮件</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-gear"></span><spanclass="mui-tab-label">设置</span></a></nav>左右滑动选项卡代码块：mtabviewpage<divclass="mui-slider"><divclass="mui-slider-indicatormui-segmented-controlmui-segmented-control-inverted"><aclass="mui-control-item"href="#item1">选项卡1</a><aclass="mui-control-item"href="#item2">选项卡2</a></div><divid="sliderProgressBar"class="mui-slider-progress-barmui-col-xs-6"></div><divclass="mui-slider-group"><divid="item1"class="mui-slider-itemmui-control-contentmui-active"><ulclass="mui-table-view"><liclass="mui-table-view-cell">第1个选项卡子项</li><liclass="mui-table-view-cell">第1个选项卡子项</li></ul></div><divid="item2"class="mui-slider-itemmui-control-content"><ulclass="mui-table-view"><liclass="mui-table-view-cell">第2个选项卡子项</li><liclass="mui-table-view-cell">第2个选项卡子项</li></ul></div></div></div>升级版标题也能滚动<divclass="mui-slider"><divclass="mui-slider-indicatormui-segmented-controlmui-segmented-control-invertedmui-scroll-wrapper"><divclass="mui-scroll"><!--锚点关联--><ahref="#item1"class="mui-control-itemmui-active">Item1</a><ahref="#item2"class="mui-control-item">Item2</a><ahref="#item3"class="mui-control-item">Item3</a><ahref="#item4"class="mui-control-item">Item4</a><ahref="#item5"class="mui-control-item">Item5</a></div></div><!--横条，可以调整长短--><!--<divid="sliderProgressBar"class="mui-slider-progress-barmui-col-xs-6"></div>--><divclass="mui-slider-group"><!--选项内容1--><divid="item1"class="mui-slider-itemmui-control-contentmui-active"><ulclass="mui-table-view"><liclass="mui-table-view-cell">第1个选项卡子项</li><liclass="mui-table-view-cell">第1个选项卡子项</li></ul></div><!--选项内容2--><divid="item2"class="mui-slider-itemmui-control-content">item2content</div><!--选项内容3--><divid="item3"class="mui-slider-itemmui-control-content">item3content</div><!--选项内容4--><divid="item4"class="mui-slider-itemmui-control-content">item4content</div><!--选项内容5--><divid="item5"class="mui-slider-itemmui-control-content">item5content</div></div></div>
说明代码块：mrow、mcolsm、mcolxs详细栅格系统：可以本站搜索布局官方文档：https://dev.dcloud.net.cn/mui/ui/#grid例子<h5class="mui-content-padded">占满12份12</h5><divclass="mui-row"><imgclass="mui-col-xs-12"src="images/1.jpg"></div><h5class="mui-content-padded">占满12份6+6</h5><divclass="mui-row"><imgclass="mui-col-xs-6"src="images/1.jpg"><imgclass="mui-col-xs-6"src="images/2.jpg"></div><h5class="mui-content-padded">占满12份4+4+4</h5><divclass="mui-row"><imgclass="mui-col-xs-4"src="images/1.jpg"><imgclass="mui-col-xs-4"src="images/2.jpg"><imgclass="mui-col-xs-4"src="images/3.jpg"></div>九宫格布局代码块：mgrid
说明代码块：mslider官方文档：https://dev.dcloud.net.cn/mui/ui/#gallery基本代码块不能循环轮播<divclass="mui-slider"><divclass="mui-slider-group"><divclass="mui-slider-item"><ahref="#"><imgsrc="1.jpg"/></a></div><divclass="mui-slider-item"><ahref="#"><imgsrc="2.jpg"/></a></div><divclass="mui-slider-item"><ahref="#"><imgsrc="3.jpg"/></a></div><divclass="mui-slider-item"><ahref="#"><imgsrc="4.jpg"/></a></div></div></div>循环轮播<!--轮播图--><divid="slider"class="mui-slider"><divclass="mui-slider-groupmui-slider-loop"><!--额外增加的一个节点(循环轮播：第一个节点是最后一张轮播)--><divclass="mui-slider-itemmui-slider-item-duplicate"><ahref="#"><imgsrc="./images/4.jpg"></a></div><!--第一张--><divclass="mui-slider-item"><ahref="#"><imgsrc="./images/1.jpg"></a></div><!--第二张--><divclass="mui-slider-item"><ahref="#"><imgsrc="./images/2.jpg"></a></div><!--第三张--><divclass="mui-slider-item"><ahref="#"><imgsrc="./images/3.jpg"></a></div><!--第四张--><divclass="mui-slider-item"><ahref="#"><imgsrc="./images/4.jpg"></a></div><!--额外增加的一个节点(循环轮播：最后一个节点是第一张轮播)--><divclass="mui-slider-itemmui-slider-item-duplicate"><ahref="#"><imgsrc="./images/1.jpg"></a></div></div><!--指示点--><divclass="mui-slider-indicator"><divclass="mui-indicatormui-active"></div><divclass="mui-indicator"></div><divclass="mui-indicator"></div><divclass="mui-indicator"></div></div></div>
说明actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮；actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover。代码块：mactionsheet官方文档：https://dev.dcloud.net.cn/mui/ui/#actionsheet锚点弹出<!--锚点弹出--><ahref="#sheet"id="openSheet"class="mui-btnmui-btn-primarymui-btn-block">打开操作表</a><!--操作表--><divid="sheet"class="mui-popovermui-popover-bottommui-popover-action"><!--可选择菜单--><ulclass="mui-table-view"><liclass="mui-table-view-cell"><ahref="#">菜单1</a></li><liclass="mui-table-view-cell"><ahref="#">菜单2</a></li></ul><!--取消菜单--><ulclass="mui-table-view"><liclass="mui-table-view-cell"><ahref="#sheet"><b>取消</b></a></li></ul></div>使用Js弹出<!--按钮弹出--><aid="openSheet"class="mui-btnmui-btn-primarymui-btn-block">打开操作表</a><!--操作表--><divid="sheet"class="mui-popovermui-popover-bottommui-popover-action"><!--可选择菜单--><ulclass="mui-table-view"><liclass="mui-table-view-cell"><ahref="#">打开文件管理</a></li><liclass="mui-table-view-cell"><ahref="#">打开相机</a></li></ul><!--取消菜单--><ulclass="mui-table-view"><liclass="mui-table-view-cell"><ahref="#sheet"><b>取消</b></a></li></ul></div><scripttype="text/javascript">//添加按钮弹出事件document.getElementById("openSheet").addEventListener("tap",function(){mui("#sheet").popover("toggle")})</script>点击取消隐藏<script>//点击取消隐藏document.getElementById("hide-sheet").addEventListener("tap",function(){mui("#sheet").popover("hide")})</script>
说明弹出菜单显示内容不限，但必须包裹在一个含mui-popover类的div中代码块：mpopover官方文档：https://dev.dcloud.net.cn/mui/ui/#ui_popover第一种弹出菜单方法mui推荐使用锚点方式<!--href加#号，锚点--><ahref="#popover"id="openPopover"class="mui-btnmui-btn-primarymui-btn-block">打开弹出菜单</a><!--弹出菜单--><divid="popover"class="mui-popover"><ulclass="mui-table-view"><liclass="mui-table-view-cell"><ahref="#">个人中心</a></li><liclass="mui-table-view-cell"><ahref="#">修改密码</a></li><liclass="mui-table-view-cell"><ahref="#">安全退出</a></li></ul></div>第二种弹出菜单方法使用Js方法控制，mui('选择器').popover(status[,anchor]);status：点击状态，三个可选值。'show'：显示弹出框'hide'：隐藏弹出框'toggle'：自动识别处理显示隐藏状态anchor：可选，anchorElement锚点元素，定义弹出框在哪个元素下弹出。<!--按钮点击弹出--><aid="openPopover"class="mui-btnmui-btn-primarymui-btn-block">打开弹出菜单</a><!--弹出菜单--><divid="popover"class="mui-popover"><ulclass="mui-table-view"><liclass="mui-table-view-cell"><ahref="#">个人中心</a></li><liclass="mui-table-view-cell"><ahref="#">修改密码</a></li><liclass="mui-table-view-cell"><ahref="#">安全退出</a></li></ul></div><scripttype="text/javascript">//添加点击事件document.getElementById("openPopover").addEventListener("tap",function(){mui("#popover").popover("toggle")})</script>mui('.mui-popover').popover('toggle',document.getElementById("openPopover"));
折叠面板代码块：maccordion官方文档：https://dev.dcloud.net.cn/mui/ui/#accordion例子<ulclass="mui-table-view"><liclass="mui-table-view-divider">帮助中心</li><liclass="mui-table-view-cellmui-collapse"><aclass="mui-navigate-right"href="#">如何使用</a><divclass="mui-collapse-content"><p>大数据男孩</p><p>大数据男孩</p></div></li><liclass="mui-table-view-cellmui-collapse"><aclass="mui-navigate-right"href="#">大数据男孩</a><divclass="mui-collapse-content"><p>bigdataboy</p></div></li><liclass="mui-table-view-cellmui-collapse"><aclass="mui-navigate-right"href="#">大数据男孩</a><divclass="mui-collapse-content"><p>bigdataboy</p></div></li></ul>
说明列表是常用的UI控件，mui封装的列表组件比较简单，只需要在ul节点上添加mui-table-view类、在li节点上添加mui-table-view-cell类即可官方文档：https://dev.dcloud.net.cn/mui/ui/#listview代码块：mlist普通列表<!--普通列表--><ulclass="mui-table-view"><liclass="mui-table-view-cell">Python</li><liclass="mui-table-view-cell">Scala</li><liclass="mui-table-view-cell">Java</li></ul>各类列表<divclass="mui-content-padded"><h5>各类列表</h5></div><ulclass="mui-table-view"><liclass="mui-table-view-cell"><label>普通列表</label></li><liclass="mui-table-view-cell"><aclass="mui-navigate-right">带箭头列表</a></li><liclass="mui-table-view-cellmui-checkbox"><label>单选</label><inputname="checkbox"type="checkbox"checked></li><liclass="mui-table-view-cell"><label>带数字角标</label><spanclass="mui-badgemui-badge-primary">11</span></li><liclass="mui-table-view-cell"><label>按钮</label><buttontype="button"class="mui-btnmui-btn-blue">按钮</button></li><liclass="mui-table-view-cell"><label>带开关</label><divclass="mui-switchmui-activemui-switch-blue"><divclass="mui-switch-handle"></div></div></li><liclass="mui-table-view-cell"><ahref="javascript:;"><imgclass="mui-media-objectmui-pull-left"src="./images/qq.png"><divclass="mui-media-body"><p>图文列表</p><!--字超出范围用...表示--><pclass='mui-ellipsis'>详情详情详情详情详情详情详情详情详情详情详详情</p></div></a></li></ul>自定义列表点击的高亮修改.mui-table-view-cell.mui-active的背景样式<styletype="text/css">/*点击变蓝色高亮*/.mui-table-view-cell.mui-active{background-color:#0062CC;color:white;}</style><divclass="mui-content-padded"><h5>各类列表</h5></div><ulclass="mui-table-view"><liclass="mui-table-view-cell">普通列表</li></ul>
说明卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等官方文档：https://dev.dcloud.net.cn/mui/ui/#cardview主体结构<divclass="mui-card"><!--页眉，放置标题--><divclass="mui-card-header">页眉</div><!--内容区--><divclass="mui-card-content">内容区</div><!--页脚，放置补充信息或支持的操作--><divclass="mui-card-footer">页脚</div></div>页眉及内容区均支持放置图片；<divclass="mui-card"><!--页眉，放置标题--><divclass="mui-card-headermui-card-media"><imgsrc="images/logo.png"/><divclass="mui-media-body"><p>大数据男孩</p><p>发表于2016-06-3015:30</p></div></div><!--内容区--><divclass="mui-card-content">内容区</div><!--页脚，放置补充信息或支持的操作--><divclass="mui-card-footer">页脚</div></div>页眉、内容区放置图片的话，需要在mui-card-header、mui-card-content节点上增加mui-card-media类，然后设置一张图片做背景图<styletype="text/css">.mui-card-header.mui-card-media{height:40vw;background-image:url(images/logo.png)}</style><divclass="mui-card"><!--页眉，放置标题--><divclass="mui-card-headermui-card-media">放置图片</div><!--内容区--><divclass="mui-card-content">内容区</div><!--页脚，放置补充信息或支持的操作--><divclass="mui-card-footer">页脚</div></div>例子<styletype="text/css">/*内容区的背景*/.mui-card-content.mui-card-media{height:40vw;background-image:url(images/logo.png)}</style><divclass="mui-content"><divclass="mui-card"><!--页眉，放置标题--><divclass="mui-card-headermui-card-media"><imgsrc="images/logo.png"/><divclass="mui-media-body"><p>大数据男孩</p><p>发表于2016-06-3015:30</p></div></div><!--内容区--><divclass="mui-card-contentmui-card-media"><!--添加四周的边距--><divclass="mui-card-content-inner"><pstyle="color:#000000;">啦啦啦啦啦</p></div></div><!--页脚，放置补充信息或支持的操作--><divclass="mui-card-footer"><ahref=""class="mui-card-link">收藏</a><ahref=""class="mui-card-link">回复</a><ahref=""class="mui-card-link">查看</a></div></div></div>
多选同一组多选按钮，name一致。代码块：mcheckbox<divclass="mui-content-padded"><h5>多选按钮</h5><divclass="mui-input-rowmui-checkbox"><label>Python</label><inputname="Checkbox"type="checkbox"checked></div><divclass="mui-input-rowmui-checkbox"><label>Scala</label><inputname="Checkbox"type="checkbox"checked></div></div>单选同一组单选按钮，name一致。代码块：mradio<divclass="mui-content-padded"><h5>单选按钮</h5><divclass="mui-input-rowmui-radio"><label>男</label><!--checked默认选中--><inputname="radio"type="radio"checked></div><divclass="mui-input-rowmui-radio"><label>女</label><inputname="radio"type="radio"></div></div>修改显示位置默认radio在右侧显示，若希望在左侧显示，只需增加mui-left类即可若要禁用radio，只需在radio上增加disabled属性即可；<h5>左端显示</h5><divclass="mui-input-rowmui-radiomui-left"><label>radio</label><inputname="radio1"type="radio"></div>列表式单选<h5>列表使单选</h5><ulclass="mui-table-viewmui-table-view-radio"><liclass="mui-table-view-cell"><aclass="mui-navigate-right">Item1</a></li><liclass="mui-table-view-cellmui-selected"><aclass="mui-navigate-right">Item2</a></li><liclass="mui-table-view-cell"><aclass="mui-navigate-right">Item3</a></li></ul>列表式单选事件列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点<h5>列表使单选</h5><ulid="li-radio"class="mui-table-viewmui-table-view-radio"><liclass="mui-table-view-cell"><aclass="mui-navigate-right">Python</a></li><liclass="mui-table-view-cellmui-selected"><aclass="mui-navigate-right">Java</a></li><pid="p-li"></p></ul><scripttype="text/javascript">//绑定selected事件document.getElementById("li-radio").addEventListener("selected",function(e){varli=document.getElementById("p-li")//获取值li.innerHTML="你选着的是"+e.detail.el.innerHTML})</script>
说明所有包裹在mui-input-row类中的input、textarea等元素都将被默认设置宽度属性为width:100%;。将label元素和上述控件控件包裹在mui-input-group中可以获得最好的排列。官方说明：https://dev.dcloud.net.cn/mui/ui/#input相应代码块mform、minput注意mui在mui.init()中会自动初始化基本控件,但是动态添加的Input组件需要重新进行初始化//实例mui('.mui-input-rowinput').input();结构实例<!--mui-input-group包裹--><formclass="mui-input-group"><!--每一行mui-input-row包裹--><divclass="mui-input-row"><label>输入框</label><inputtype="text"placeholder="请输入"></div><divclass="mui-input-row"><label>输入框</label><inputtype="text"class="mui-input-clear"placeholder="带清除按钮的输入框"></div></form>带有清除的输入框在input控件上添加mui-input-clear类<formclass="mui-input-group"><divclass="mui-input-row"><label>快速删除</label><inputtype="text"class="mui-input-clear"placeholder="带清除按钮的输入框"></div></form>密码框给input元素添加mui-input-password类即可使用<formclass="mui-input-group"><!--密码框--><divclass="mui-input-row"><label>密码框</label><inputtype="text"class="mui-input-password"placeholder="请输入"></div></form>搜索框搜索框：在mui-input-row同级添加mui-input-search类，就可以使用search控件<formclass="mui-input-group"><!--搜索框--><divclass="mui-input-rowmui-search"><inputtype="search"class="mui-input-clear"placeholder="搜索框"></div></form>表单校验HTML代码<formclass="mui-input-group"><!--表单校验--><divid="input_example"class="mui-input-group"><divclass="mui-input-row"><label>用户名：</label><inputtype="text"class="mui-input-clear"placeholder="请输入用户名"></div><divclass="mui-input-row"><label>密码：</label><inputtype="password"class="mui-input-clearmui-input-password"placeholder="请输入密码"></div><divclass="mui-button-row"><buttontype="button"class="mui-btnmui-btn-primary"id="input_check">验证</button></div></div></form>Js校验代码<scripttype="text/javascript">//绑定点击事件document.getElementById("input_check").addEventListener('click',function(){//校验结果varcheck=true;//使用each()方法校验mui("#input_exampleinput").each(function(){//若当前input为空，则alert提醒if(!this.value||this.value.trim()==""){//获取兄弟元素varlabel=this.previousElementSibling;mui.alert(label.innerText+"不允许为空");check=false;returnfalse;}});//校验通过，继续执行业务逻辑check&&mui.alert('验证通过!')})</script>注意注：始终为button按钮添加type属性，若button按钮没有type属性，浏览器默认按照type="submit"逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。