<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" href="css/public.css" /> <link rel="stylesheet" href="css/index.css" /> <link rel="stylesheet" href="css/font.css" /> <link rel="stylesheet" href="//at.alicdn.com/t/font_502516_986m76od7r1thuxr.css" /> <script type="text/javascript"> setRem(); function setRem() { var html, dpi, vw, sca; html = document.getElementsByTagName('html')[0]; vw = window.screen.width; dpi = window.devicePixelRatio; html.style.fontSize = (vw * dpi) / 10 + 'px'; html.setAttribute('dpi', dpi); } window.addEventListener('resize', setRem, false); window.addEventListener('orientationchange', setRem, false); </script> <style> .mui-slider .mui-slider-group .mui-slider-item { width: 100%; height: 200px; } .mui-slider .mui-slider-group .mui-slider-item:nth-child(1) { background-color: red; } .mui-slider .mui-slider-group .mui-slider-item:nth-child(2) { background-color: green; } .mui-slider .mui-slider-group .mui-slider-item:nth-child(3) { background-color: gold; } .mui-slider .mui-slider-group .mui-slider-item:nth-child(4) { background-color: grey; } .nav { width: 100%; overflow: hidden; } .nav div { width: 25%; border: 1px solid #000; box-sizing: border-box; float: left; } .nav div.active { background-color: red; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">首页</h1> <div class="tit-icons"> <span class="tit-icon tit-icon1 icon icon-search"></span> <span class="tit-icon tit-icon2 icon icon-iconfontxiaoxitixing"></span> </div> </header> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active"> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item"> <span class="mui-tab-label">最新资讯</span> </a> <a class="mui-tab-item"> <span class="mui-tab-label">我的</span> </a> </nav> <div class="mui-content"> <nav class="nav"> <div class="active">首页</div> <div>联系</div> <div>我们</div> <div>miss</div> </nav> <div class="mui-slider" id="swiper1"> <div class="mui-slider-group"> <div class="mui-slider-item"> 首页 </div> <div class="mui-slider-item"> 联系 </div> <div class="mui-slider-item"> 我们 </div> <div class="mui-slider-item"> miss </div> </div> </div> <div id="info"></div> </div> <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> mui.init(); var swiper1 = mui('#swiper1'); swiper1.slider({ // interv al:5000 });//http://dev.dcloud.net.cn/mui/util/ mui选择器
mui使用css选择器获取HTML元素，返回mui对象数组。
mui("p")：选取所有<p>元素 mui("p.title")：选取所有包含.title类的<p>元素 若要将mui对象转化成dom对象，可使用如下方法（类似jquery对象转成dom对象）：
//obj1是mui对象 var obj1 = mui("#title"); //obj2是dom对象 var obj2 = obj1[0]; //addEventListener单个绑定事件 /*var div=document.querySelectorAll('.nav div'); for (var i = 0; i < div.length; i++) { div[i].index=i; div[i].addEventListener('tap',function(){ alert(this.index) },false) }*/ //on事件委托绑定点击单个或群组事件 /*mui('.nav').on('tap','div',function(){ alert() })*/ //滑动选项卡切换导航内容 var div=document.querySelectorAll('.nav div') document.querySelector('.mui-slider').addEventListener('slide', function(event) { //注意slideNumber是从0开始的； // document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片"; switch(event.detail.slideNumber) { case 0: for (var i = 0; i < div.length; i++) { div[i].className=''; } div[0].className='active' break; case 1: for (var i = 0; i < div.length; i++) { div[i].className=''; } div[1].className='active' break; case 2: for (var i = 0; i < div.length; i++) { div[i].className=''; } div[2].className='active' break; case 3: for (var i = 0; i < div.length; i++) { div[i].className=''; } div[3].className='active' break; default: break; } }); //点击导航内容滑动切换选项卡 var This=div[0]; for (var i = 0; i < div.length; i++) { div[i].index=i; div[i].addEventListener('tap',function(){ This.className=''; this.className='active'; This=this; mui('#swiper1').slider().gotoItem(this.index); },false) } </script> </body></html>