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()方法中。