mui筆記

今天用到了mui來實現移動端的輪播，之前沒有接觸過，就去官網學習了一下 文檔連接 http://dev.dcloud.net.cn/mui/ui/

首先，MUI是一套前端框架，提供大量H5和js語言組成的組件，大大提升了開發效率。

mui中的UI組件的gallery集成自slider插件，DOM元素的編寫方式 默認不自動輪播

<div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
  </div>
</div>

若是須要自動輪播，則須要在.mui-slider-group節點上增長.mui-slider-loop類，同時須要重複增長2張圖片，圖片順序變爲：四、一、二、三、四、1，代碼示例以下：

<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
    <!--支持循環，須要重複圖片節點-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
    <!--支持循環，須要重複圖片節點-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
  </div>
</div>

在js method中能夠調用其方法來設置其自動輪播

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

選要注意的是：調用mui時，必須確保全部輪播的圖片都已經加載完成，不然自動輪播的效果不會實現。意思就是若頁面中的輪播圖片經過ajax異步加載的，則須要在ajax請求成功以後，在success函數中調用mui的方法；若頁面中輪播的圖片，是直接寫在頁面中，則在js中須要將 mui的方法放到window.onload()方法中。