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>12345678998span>span>
										<span class="client_one">到店时间： <span>2017-4-12span>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>12345678998span>span>
										<span class="client_one">到店时间： <span>2017-4-12span>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>02304span>号span>
										<span class="client_three"><span>2019-7-04  05:04span>到店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>03058span>号span>
										<span class="client_three"><span>2019-7-04  05:04span>到店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-04span>span>
										<span class="client_three">消费金额： <span>200.00span>元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-04span>span>
										<span class="client_three">消费金额： <span>200.00span>元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-04span>span>
										<span class="client_three">消费金额： <span>200.00span>元span>
										span>
										<span class="client_zhuangtai"><img src="../img/client_xiaofen.png"/>span>
									li>
								ul>
					div>
				div>
			div>
		div>

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