假設當前圖片輪播中有1、2、3、4四張圖片，從第1張圖片起，依次向左滑動切換圖片，當切換到第4張圖片時，繼續(xù)向左滑動，接下來會有兩種效果：

1. 支持循環(huán)：左滑，直接切換到第1張圖片；

2. 不支持循環(huán)：左滑，無反應，繼續(xù)顯示第4張圖片，用戶若要顯示第1張圖片，必須連續(xù)向右滑動切換到第1張圖片；

當顯示第1張圖片時，繼續(xù)右滑是否顯示第4張圖片，是同樣問題；這個問題的實現(xiàn)需要通過.mui-slider-loop類及DOM節(jié)點來控制；

若要支持循環(huán)，則需要在.mui-slider-group節(jié)點上增加.mui-slider-loop類，同時需要重復增加2張圖片，圖片順序變?yōu)椋?、1、2、3、4、1，代碼示例如下：

mui框架內(nèi)置了圖片輪播插件，通過該插件封裝的JS API，用戶可以設定是否自動輪播及輪播周期，如下為代碼示例：

//獲得slider插件對象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:3000//自動輪播周期，若為0則不自動播放，默認為0；
});

因此若希望圖片輪播不要自動播放，而是用戶手動滑動才切換，只需要通過如上方法，將interval參數(shù)設為0即可。

若要跳轉(zhuǎn)到第x張圖片，則可以使用圖片輪播插件的gotoItem方法，例如：

//mui自帶的on事件綁定，只能用事件委派方式
mui(".mui-content").on("tap","#btn",function(){
    gallery.slider().gotoItem(2);//調(diào)到第三張圖片，index從0開始
});

4.input(輸入表單)

所有包裹在.mui-input-row類中的 input、textarea等元素都將被默認設置寬度屬性為width: 100%;。 將 label 元素和上述控件控件包裹在.mui-input-group中可以獲得最好的排列。

（密碼輸入框右側(cè)還自帶了一個眼睛圖標呢，我覺得特別好用）

代碼如下：

    
        用戶名
    
    
    
        密碼
        
    

mui目前還提供了幾個輸入增強功能：快速刪除、語音輸入*5+ only和密碼框顯示隱藏密碼。

1)快速刪除：只需要在input控件上添加.mui-input-clear類，當input 控件中有內(nèi)容時，右側(cè)會有一個刪除圖標，點擊會清空當前input的內(nèi)容

代碼如下：

    
        快速刪除
        
    

2)搜索框：在.mui-input-row同級添加.mui-input-search類，就可以使用search控件

代碼如下：

3)語音輸入*5+ only：為了方便快速輸入，mui集成了HTML5+的語音輸入，只需要在對應input控件上添加.mui-input-speech類，就可以在5+環(huán)境下使用語音輸入

 4)密碼框：給input元素添加.mui-input-password類即可使用

代碼如下：

    
        密碼框
        
    

5.list(列表)

mui封裝的列表組件是比較簡單也很好用的。只需要在ul節(jié)點上添加.mui-table-view類、在li節(jié)點上添加.mui-table-view-cell類即可

    Item 1
    Item 2
    Item 3

運行結(jié)果如下圖：

自定義列表高亮顏色

點擊列表，對應列表項顯示灰色高亮，若想自定義高亮顏色，只需要重寫.mui-table-view-cell.mui-active即可，如下：

/*點擊變灰色高亮*/
.mui-table-view-cell.mui-active{
    background-color: gray;
}

右側(cè)添加導航箭頭

若右側(cè)需要增加導航箭頭，變成導航鏈接，則只需在li節(jié)點下增加a子節(jié)點，并為該a節(jié)點增加.mui-navigate-right類即可，如下：

    
        Item 1
    
    
        Item 2
    
    
        Item 3
    

運行結(jié)果如下：

右側(cè)添加數(shù)字角標等控件

mui支持將數(shù)字角標、按鈕、開關等控件放在列表中；mui默認將數(shù)字角標放在列表右側(cè)顯示，代碼如下：

    Item 1 
        1
    
    Item 2 
        2
    
    Item 3 
        3
    

運行結(jié)果如下：

（圖文列表）

圖文列表繼承自列表組件，主要添加了.mui-media、.mui-media-object、.mui-media-body、.mui-pull-left/right幾個類，如下為示例代碼

    
        
            
            
                幸福
                能和心愛的人一起睡覺，是件幸福的事情；可是，打呼嚕怎么辦？

            
        
    
    
        
            
            
                木屋
                想要這樣一間小木屋，夏天挫冰吃瓜，冬天圍爐取暖.

            
        
    
    
        
            
            
                CBD
                烤爐模式的城，到黃昏，如同打翻的調(diào)色盤一般.

            
        
    

運行結(jié)果如下：

看完了這篇文章，相信你對“如何使用移動HTML5前端框架MUI”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！