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