mui輪播組件，滑動選項卡、導航內容相互切換

時間 2019-11-16

標籤 mui 組件滑動選項導航內容相互切換简体版

原文原文鏈接

<!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
           });javascript

　　//http://dev.dcloud.net.cn/mui/util/ mui選擇器css

　　mui使用css選擇器獲取HTML元素，返回mui對象數組。
　　mui("p")：選取全部<p>元素
　　mui("p.title")：選取全部包含.title類的<p>元素 html

　　若要將mui對象轉化成dom對象，可以使用以下方法（相似jquery對象轉成dom對象）：java

　　//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>jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。