mui提供了圖片輪播、可拖動式圖文表格、可拖動式選項卡、左右滑動9宮格組件，這些組件都用到了mui框架的slide插件，有較多共同點。首先，Dom內容構造基本相同，都必須有一個.mui-slider的父容器；其次，當拖動切換顯示內容時，均會觸發slide事件（可拖動式選項卡在點擊選項卡標題時，也會觸發slide事件），通過該事件的detail.slideNumber參數可以獲得當前顯示項的索引（第一項索引為0，第二項為1，以此類推），利用該事件，可在顯示內容切換時，動態處理一些業務邏輯。 HTML部分: ``` <div class="mui-slider"> <!--選項卡標題區--> <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <a class="mui-control-item" href="#item1">待辦公文</a> <a class="mui-control-item" href="#item2">已辦公文</a> <a class="mui-control-item" href="#item3">全部公文</a> </div> <div class="mui-slider-progress-bar mui-col-xs-4"></div> <div class="mui-slider-group"> <!--第一個選項卡內容區--> <div id="item1" class="mui-slider-item mui-control-content mui-active"> <ul class="mui-table-view"> <li class="mui-table-view-cell">待辦公文1</li> <li class="mui-table-view-cell">待辦公文2</li> <li class="mui-table-view-cell">待辦公文3</li> </ul> </div> <!--第二個選項卡內容區，頁面加載時為空--> <div id="item2" class="mui-slider-item mui-control-content"><ul class="mui-table-view"> <li class="mui-table-view-cell">待辦公文1</li> <li class="mui-table-view-cell">待辦公文2</li> <li class="mui-table-view-cell">待辦公文3</li> </ul></div> <!--第三個選項卡內容區，頁面加載時為空--> <div id="item3" class="mui-slider-item mui-control-content"></div> </div> </div> ``` JavaScript部分: ``` var item2Show = false,item3Show = false;//子選項卡是否顯示標志 document.querySelector('.mui-slider').addEventListener('slide', function(event) { if (event.detail.slideNumber === 1&&!item2Show) { //切換到第二個選項卡 //根據具體業務，動態獲得第二個選項卡內容； var content = 'er'; //顯示內容 document.getElementById("item2").innerHTML = content; //改變標志位，下次直接顯示 item2Show = true; } else if (event.detail.slideNumber === 2&&!item3Show) { //切換到第三個選項卡 //根據具體業務，動態獲得第三個選項卡內容； var content = 'san'; //顯示內容 document.getElementById("item3").innerHTML = content; //改變標志位，下次直接顯示 item3Show = true; } }); ```