mui 使用记录

1选项卡切换问题

<div class="mui-slider tl" style="background-color: #f4f4f4;">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="background-color: #ffffff;">
	<a class="mui-control-item <c:if test="${empty status}">mui-active</c:if>" href="#item1">全部订单</a>
	<a class="mui-control-item <c:if test="${not empty status && status == 1}">mui-active</c:if>" href="#item2">待支付</a>
	<a class="mui-control-item <c:if test="${not empty status && status == 2}">mui-active</c:if>" href="#item3">已支付</a>
	<a class="mui-control-item <c:if test="${not empty status && status == 7}">mui-active</c:if>" href="#item4">已完成</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
<div class="mui-slider-group">
	<div id="item1" class="mui-slider-item mui-control-content mui-active">
	<div id="item2" class="mui-slider-item mui-control-content mui-active">
	<div id="item3" class="mui-slider-item mui-control-content mui-active">
	<div id="item4" class="mui-slider-item mui-control-content mui-active">
</div>

js 部分

var status = '${status}';
if (status){
	var slider = mui('.mui-slider');
	console.log(slider.slider().getSlideNumber());
	
	slider.slider().gotoItem(status);
}

2mui分页

html部分

<div id="refreshContainer" class="mui-scroll-wrapper">
		<div class="mui-scroll">
			<ul id="shopBox" class="mui-table-view" style="background-color: #f4f4f4;padding-top: 65px;"></ul>
		</div>
</div>

	js部分

mui.init({
			pullRefresh: {
				container: '#refreshContainer', //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				auto: false, // 可选,默认false.自动上拉加载一次
				height: 50,
				up: {
					contentrefresh: '正在加载...',
					contentnomore:	'没有更多数据了',
					callback: function() {
						console.log(123);
						pages++;//页数
						showajax(pages);//ajax函数
						mui('#refreshContainer').pullRefresh().endPullupToRefresh();

					} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			}
		});

	//后台查询js

```javascript
var winH = $(document).height();
		function showajax(pages){
			var type = '${type}'
			var index = layer.load(2);
			if (pages=='1'){
				// mui('#refreshContainer').pullRefresh().refresh(true);
			}
			$.ajax({ //获取搜索的列表信息
				type: "post",
				dataType: 'json',
				url: '/common/msgList',
				data: {
					// "status": states, //请求参数  商品名
					"categroyName": $("#search_name").val(), //请求参数  商品名
					"page": pages, //
					"type": type, //
					"row": '5' //请求参数  openid
				},
				success: function(data) {
					layer.close(index);
					if(data.code == 0) { //请求成功
						if (pages=='1'){
							$('#shopBox').empty();
						}
						var con = data.data;
						if(con.records.length == 0 && pages == 1) {
							layer.closeAll();
							$('#shopBox'+num).html('<p>抱歉，没有找到您查找的咨询哦！试试咨询吧</p>');
							$('#shopBox'+num+' p').css({
								'text-align': 'center',
								'color': '#c6bfbf',
								'line-height': winH + 'px'
							});
						} else {
							var html = '';
							if(type==4||type==5){
								$.each(con.records, function(k, v) {
									html += '<li class="wore"><a href="${mobileappPath}/mobileappadvisory/detail/'+v.advisory_id+'/'+1+'">';
									html += '<div class="aotu t12">';
									html += '<span class="left black">'+v.advisory_cate_name+'</span>';
									if(v.advisory_status==1){
										html += '<span class="blue right">待回复</span>';
									}else if (v.advisory_status==2){
										html += '<span class="blue right">已回复</span>';
									}else if (v.advisory_status==3){
										html += '<span class="blue right">已结束</span>';
									}else{
										html += '<span class="blue right">待回复</span>';
									}

									html += '</div>';
									html += '<div class="mt10 img-list left">';
									html += '<div  class="left hidden hight-aotu">';
									<%--html += '<img src="${fileUrl}/'+v.category_url+'" class="list-post left mr5"/>';--%>
									html += '<span class="black">'+v.advisory_subject+'</span>';
									html += '<br><span style="display: inline-block;color: #8d9293;font-size: 14px;">'+time(v.advisory_time)+'</span>';
									html += '</div>';
									html += '</div>';
									html += '</li>';
								});
							}else {
								$.each(con.records, function(k, v) {
									html += '<li class="wore"><a href="${mobileappPath}/mobileappadvisory/detail/'+v.advisory_id+'/'+1+'">';
									html += '<div class="aotu t12">';
									html += '<span class="left black">'+v.advisory_cate_name+'</span>';
									if(v.advisory_status==1){
										html += '<span class="blue right">待回复</span>';
									}else if (v.advisory_status==2){
										html += '<span class="blue right">已回复</span>';
									}else if (v.advisory_status==3){
										html += '<span class="blue right">已结束</span>';
									}else{
										html += '<span class="blue right">待回复</span>';
									}

									html += '</div>';
									html += '<div class="mt10 img-list left">';
									html += '<div  class="left hidden hight-aotu">';
									html += '<img src="${fileUrl}/'+v.category_url+'" class="list-post left mr5"/>';
									html += '<span class="black">'+v.advisory_subject+'</span>';
									html += '<br><span style="display: inline-block;color: #8d9293;font-size: 14px;">'+time(v.advisory_time)+'</span>';
									html += '</div>';
									html += '</div>';
									html += '</li>';
								});
							}
							$('#shopBox').append(html); //动态显示搜索列表
							if(data.data.records.length > 0) {
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
							} else {
								layer.msg("已经到底了");
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
							}
						}
					} else {
						layer.msg(data.msg);
					}

				}
			});
		}