mui顶部导航栏

首先建一个index.html

<header class="mui-bar mui-bar-nav">
		  <span class="index-left">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">返回</a>
			</span>
			<h1 class="mui-title">订单管理</h1>
		</header>

mui.init({
            subpages:[{                //下边是初始化，然后这个页面显示我们将插入的页面
                url:"../client/client_content.html",
                id:"client_content.html",
                styles:{
                    top:"80px",
                    bottom:"0px"
                }
            }]
        })

然后建一个client_content.html

<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">
							未处理订单
						</a>
						<a class="mui-control-item" href="#item2mobile">
							当前订单
						</a>
						<a class="mui-control-item" href="#item3mobile">
							历史订单
						</a>
					</div>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<!--下划线-->
				<div class="mui-slider-group">
				
				<!--未处理订单-->
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
								<span class="search">
									<input type="text" name="" id="" value="" placeholder="搜索"/>
								</span>
								<ul class="mui-table-view">
									<li class="mui-table-view-cell order">
										<span class="client_text order_text">
										<span class="client_one">入住客户： <span>刘晓明</span></span>
										<span class="client_two">电话： <span>12345678998</span></span>
										<span class="client_one">到店时间： <span>2017-4-12</span></span>
										<span class="client_two">预订房型： <span>豪华大床房</span></span>
										</span>
										<span class="client_button">
											<span class="M_button">房间已满</span>
											<span class="A_button">确认订单</span>
										</span>
									</li>
									<li class="mui-table-view-cell order">
										<span class="client_text order_text">
										<span class="client_one">入住客户： <span>刘晓明</span></span>
										<span class="client_two">电话： <span>12345678998</span></span>
										<span class="client_one">到店时间： <span>2017-4-12</span></span>
										<span class="client_two">预订房型： <span>豪华大床房</span></span>
										</span>
										<span class="client_button">
											<span class="M_button">房间已满</span>
											<span class="A_button">确认订单</span>
										</span>
									</li>
								</ul>
					</div>
					
					<!--当前订单-->
					<div id="item2mobile" class="mui-slider-item mui-control-content">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell now">
										<span class="client_img"><img src="../img/client_header.png"/></span>
										<span class="client_text">
										<span class="client_one">姓名： <span>某某某</span></span>
										<span class="client_two">入住房号： <span>02304</span>号</span>
										<span class="client_three"><span>2019-7-04  05:04</span>到店</span>
										</span>
										<span class="client_zhuangtai"><img src="../img/client_ing.png"/></span>
									</li>
									<li class="mui-table-view-cell">
										<span class="client_img"><img src="../img/client_header.png"/></span>
										<span class="client_text">
										<span class="client_one">姓名： <span>某某某</span></span>
										<span class="client_two">入住房号： <span>03058</span>号</span>
										<span class="client_three"><span>2019-7-04  05:04</span>到店</span>
										</span>
										<span class="client_zhuangtai"><img src="../img/client_ing.png"/></span>
									</li>
								</ul>
					</div>
					
					<!--历史订单-->
					<div id="item3mobile" class="mui-slider-item mui-control-content">
								<span class="search">
									<input type="text" name="" id="" value="" placeholder="请输入关键词"/>
								</span>
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										<span class="client_img"><img src="../img/client_header.png"/></span>
										<span class="client_text">
										<span class="client_one">姓名： <span>某某某</span></span>
										<span class="client_two">消费日期： <span>2019-7-04</span></span>
										<span class="client_three">消费金额： <span>200.00</span>元</span>
										</span>
										<span class="client_zhuangtai"><img src="../img/client_ing.png"/></span>
									</li>
									<li class="mui-table-view-cell">
										<span class="client_img"><img src="../img/header1.png"/></span>
										<span class="client_text">
										<span class="client_one">姓名： <span>某某某</span></span>
										<span class="client_two">消费日期： <span>2019-7-04</span></span>
										<span class="client_three">消费金额： <span>200.00</span>元</span>
										</span>
										<span class="client_zhuangtai"><img src="../img/client_quxiao.png"/></span>
									</li>
									<li class="mui-table-view-cell">
										<span class="client_img"><img src="../img/header1.png"/></span>
										<span class="client_text">
										<span class="client_one">姓名： <span>某某某</span></span>
										<span class="client_two">消费日期： <span>2019-7-04</span></span>
										<span class="client_three">消费金额： <span>200.00</span>元</span>
										</span>
										<span class="client_zhuangtai"><img src="../img/client_xiaofen.png"/></span>
									</li>
								</ul>
					</div>
				</div>
			</div>
		</div>

可能会有一个bug,后期更新bug并附上解决方案；