輪播組件是mui提供的一個核心組件，在該核心組件基礎上，衍生出了圖片輪播、可拖動式圖文表格、可拖動式選項卡、左右滑動9宮格等組件，這些組件有較多共同點。首先，Dom構造基本相同，如下： ~~~ <div class="mui-slider"> <div class="mui-slider-group"> <!--第一個內容區容器--> <div class="mui-slider-item"> <!-- 具體內容 --> </div> <!--第二個內容區--> <div class="mui-slider-item"> <!-- 具體內容 --> </div> </div> </div> ~~~ 當拖動切換顯示內容時，會觸發slide事件，通過該事件的detail.slideNumber參數可以獲得當前顯示項的索引（第一項索引為0，第二項為1，以此類推），利用該事件，可在顯示內容切換時，動態處理一些業務邏輯。 如下為一個可拖動式選項卡示例，為提高頁面加載速度，頁面加載時，僅顯示第一個選項卡的內容，第二、第三選項卡內容為空。 當切換到第二、第三個選項卡時，再動態獲取相應內容進行顯示： ~~~ var item2Show = false,item3Show = false;//子選項卡是否顯示標志 document.querySelector('.mui-slider').addEventListener('slide', function(event) { if (event.detail.slideNumber === 1&&!item2Show) { //切換到第二個選項卡 //根據具體業務，動態獲得第二個選項卡內容； var content = .... //顯示內容 document.getElementById("item2").innerHTML = content; //改變標志位，下次直接顯示 item2Show = true; } else if (event.detail.slideNumber === 2&&!item3Show) { //切換到第三個選項卡 //根據具體業務，動態獲得第三個選項卡內容； var content = .... //顯示內容 document.getElementById("item3").innerHTML = content; //改變標志位，下次直接顯示 item3Show = true; } }); ~~~ 圖片輪播、可拖動式圖文表格等均可按照同樣方式監聽內容變化，比如我們可以在圖片輪播界面顯示當前正在看的是第幾張圖片： ~~~ document.querySelector('.mui-slider').addEventListener('slide', function(event) { //注意slideNumber是從0開始的； document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"張圖片"; }); ~~~