HTML5 混合APP开发学习笔记（十七）——MUI框架

MUI框架

卡片视图

mui-card：卡片
mui-card-header：卡片元素的顶部
mui-card-content：卡片元素的内容部分
mui-card-footer：卡片元素的底部

<div class="mui-card">
	<div class="mui-card-header mui-card-media">
		<img src="logo.png" alt="图片">
		<div class="mui-media-body">
			小M
			<p>发表于2019.6.1</p>
		</div>
	</div>
	<div class="mui-card-content">
		<img src="cbd.jpg">
	</div>
	<div class="mui-card-footer ">
		<a class="mui-tab-item">
			<span class="mui-icon mui-icon-more"></span>
			<span class="mui-tab-label">Like</span>
		</a>
		<a class="mui-tab-item">
			<span class="mui-icon mui-icon-chat"></span>
			<span class="mui-tab-label">Comment</span>
		</a>
		<a class="mui-tab-item">
			<span class="mui-icon mui-icon-more"></span>
			<span class="mui-tab-label">Redmore</span>
		</a>
	</div>
</div>

轮播效果

mui-slider：滑动
mui-slider-group：滑动模块
mui-slider-loop：循环，最后一个元素直接跳到第一个元素
mui-slider-item：循环的内容
mui-slider-item-duplicate：第一个元素和最后一个元素需要添加该class
mui-slider-indicator：指示器，表明当前所显示的是第几个元素
mui-indicator：指示器（小圆点，为选中时为灰色，选中时为白色）

<div id="slider" class="mui-slider">
	<div class="mui-slider-group mui-slider-loop">
		<div class="mui-slider-item mui-slider-item-duplicate">
			<img src="yuantiao.jpg">
		</div>
		<div class="mui-slider-item">
			<img src="cbd.jpg">
		</div>
		<div class="mui-slider-item">
			<img src="muwu.jpg">
		</div>
		<div class="mui-slider-item mui-active">
			<img src="shuijiao.jpg">
		</div>
		<div class="mui-slider-item">
			<img src="yuantiao.jpg">
		</div>
		<div class="mui-slider-item mui-slider-item-duplicate">
			<img src="cbd.jpg">
		</div>
	</div>
	<div class="mui-slider-indicator">
		<div class="mui-indicator"></div>
		<div class="mui-indicator"></div>
		<div class="mui-indicator mui-active"></div>
		<div class="mui-indicator"></div>
	</div>
</div>
//控制自动滑动
<script type="text/javascript">
	var gallery = mui('#slider');
	gallery.slider({
		interval:2000
	});
</script>

弹出菜单

mui-popover：弹出选项
mui-table-view-cell：选项

<a href="#popover" id="openPopver" class="mui-btn mui-btn-primary mui-btn-block">弹出菜单</a>
<div id="popover" class="mui-popover">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">item1</li>
		<li class="mui-table-view-cell">item2</li>
		<li class="mui-table-view-cell">item3</li>
	</ul>
</div>

操作表（从底部弹出）

mui-popover-bottom、mui-popover-action：从底部弹出
mui-table-view-cell：选项

<a href="#sheet1" id="openSheet" class="mui-btn mui-btn-danger mui-btn-block">底层弹出菜单</a>
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">拍照或录像</li>
		<li class="mui-table-view-cell">选择图库</li>
		<li class="mui-table-view-cell">取消</li>
	</ul>
</div>

对话框

mui.alert()：提示对话框
mui.confirm()：确认对话框
mui.prompt()：输入对话框
mui.toast()：自动消失对话框

mui.alert('我是主体内容','提示对话框',function(){});
var btnArray=['是','否','不评价'];
mui.confirm('小猫咪乖吗？','确认对话框',btnArray,function(e){
	if(e.index==0){
		console.log('Yes');
	}
	else if(e.index==1){
		console.log('No');
	}
	else{
		console.log('Wait');
	}
});
var btnArray=['是','否'];
mui.prompt('Please input your opinion','Fluency','This is title',btnArray,function(e){
	if(e.index==0){
		console.log('Yes');
	}
	else{
		console.log('No');
	}
});
var data={
	duriation:1000,
	type:'div'
};
mui.toast('自动消失登录框',data);

字体图标

¹

下拉刷新和上拉加载

<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
	<div class="mui-scroll">
		<ul class="mui-table-view mui-table-view-chevron"></ul>
	</div>
</div>

<script type="text/javascript">
	mui.init({
		pullRefresh:{
			container:'#refreshContainer',
			down:{
				height:50,
				auto:false,//启动自动刷新一次
				//contentdown:'pull down to refresh',
				//contentover:'relise to refresh',
				//contentrefresh:'refreshing',
				callback:pulldownRefresh
			},
			up:{
				height:50,
				auto:true,//启动自动刷新一次
				//contentrefresh:'refreshing',
				//contentnomore:'no more data',
				callback:pullupRefresh
			}
		}
	});
	function pulldownRefresh(){
		console.log('下拉刷新结束');
		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
	};
	function pullupRefresh(){
		console.log('上拉加载结束');
		this.endPullupToRefresh(false);
	};
</script >

Ajax

简介：mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型； 本着极简的设计原则，mui提供了mui.ajax方法，并在mui.ajax方法基础上，进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。
mui.ajax(settings):

---

1. http://dev.dcloud.net.cn/mui/ui/#icon ↩︎