mui开发记录（一）图片轮播 界面布局

      最近进行移动端开发，之前接触过web开发，对h5和js等技术有了解，于是选择了mui框架进行混合开发。用了半天时间对其进行了解，发现开发起来还是很便捷的。在此记录一下学习过程。

     mui的官网组件手册​​http://dev.dcloud.net.cn/mui/ui/​​

一、图片轮播

mslider激活，就可以找到组件了。然后根据需要进行一定的修改。

<div class="mui-slider" style="height: 50%;">
    <div class="mui-slider-group mui-slider-loop">
      <!--支持循环，需要重复图片节点-->
      <div class="mui-slider-item mui-slider-item-duplicate"><img src="img/6.jpg" /></div>
      <div class="mui-slider-item"><img src="img/1.jpg" /></div>
      <div class="mui-slider-item"><img src="img/2.jpg" /></div>
      <div class="mui-slider-item"><img src="img/3.jpg" /></div>
      <div class="mui-slider-item"><img src="img/4.jpg" /></div>
      <div class="mui-slider-item"><img src="img/5.jpg" /></div>
      <div class="mui-slider-item"><img src="img/6.jpg" /></div>
      <!--支持循环，需要重复图片节点-->
      <div class="mui-slider-item mui-slider-item-duplicate"><img src="img/1.jpg" /></div>
    </div>
    <div class="mui-slider-indicator mui-text-center">
      <div class="mui-indicator mui-active"></div>
      <div class="mui-indicator"></div>
      <div class="mui-indicator"></div>
      <div class="mui-indicator"></div>
      <div class="mui-indicator"></div>
      <div class="mui-indicator"></div>
    </div>
  </div>
  <script>
    var gallery = mui('.mui-slider');
        gallery.slider({
    interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
    });
  </script>

效果图：

二、界面布局

mui也有12等分的布局方法

<div class="mui-row">
    <div class="mui-col-sm-4">
      <div class="tj_img">
        <button class="m1 " onclick="playPause(1);" id="mc_play1">
          <audio loop="loop"  id="ad1" >
            <source src="fonts/test.mp3" type="audio/mp3"></source>
          </audio>
          <img src="img/zheng1.jpg"/>
        </button>
        <p>十面埋伏</p>
      </div>
    </div>
    <div class="mui-col-sm-4">
      <div class="tj_img">
        <button class="m1 " onclick="playPause(2);" id="mc_play2">
          <audio loop="loop"  id="ad2" >
            <source src="fonts/test.mp3" type="audio/mp3"></source>
          </audio>
          <img src="img/zheng1.jpg"/>
        </button>
        <p>十面埋伏</p>
      </div>
    </div>
    <div class="mui-col-sm-4">
      <div class="tj_img">
        <button class="m1 " onclick="playPause(3);" id="mc_play3">
          <audio loop="loop"  id="ad3" >
            <source src="fonts/test.mp3" type="audio/mp3"></source>
          </audio>
          <img src="img/zheng1.jpg"/>
        </button>
        <p>十面埋伏</p>
      </div>
      
    </div>
  </div>

效果如图 

mui框架