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框架