MUI tab-bar 顶部选项卡-可左右滑动

<div class="mui-content">
<div  style="background: white;" class="mui-slider">
	<div style="background: white" class=" mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		<a style="margin-top: 10px; font-size: 20px; font-weight: 800; " class="mui-control-item" href="#item1mobile">					
        	 资料			 
		</a>
		<a style="margin-top: 10px; font-size: 20px; font-weight: 800; " class="mui-control-item" href="#item2mobile">
			动态
		</a>
	</div>
	<div class="mui-slider-progress-bar mui-col-xs-6"></div>
	<div style="margin-bottom: 10%;" class="mui-slider-group">
		<div id="item1mobile" style="background: white;" class="mui-slider-item mui-control-content mui-active">
				        	<div style="margin-top: 10px;" id="">
		<span style="font-size: 13px; font-weight: 900;" id="">
			账号信息
		</span>
		<div style="font-size: 18px;font-weight: 800; margin-top: 10px;" class="">
			<span  id="">
				友及号: 
				<span id="">
					154545
				</span>
			</span>
			<span id="">
				
			</span>	        			
		</div>
		<div style="border-bottom: 1px solid #DDDDDD ;font-size: 18px;font-weight: 800; margin-top: 10px;padding-bottom: 10px;" class="">
			<span  id="">
				注册日期: 
				<span id="">
					2018-09-14
				</span>
			</span>        			
		</div>
		<div style="margin-top: 5px;" class="">
			<span style="font-size: 13px; font-weight: 900;" id="">
				个人信息
			</span>
			<ul  class="mui-table-view">
			    <li style="margin-left: -4%;" class="mui-table-view-cell">
			        <span class="mui-navigate-right">家乡 : </span>
			         <span class="">安徽省黄山市</span>
			    </li>
			    <li style="margin-left: -4%;" class="mui-table-view-cell">
			        <span class="mui-navigate-right">星座 : </span>
			        <span >金牛座</span>
			    </li>
			    <li style="margin-left: -4%;" class="mui-table-view-cell">
			        <span class="mui-navigate-right">学校 : </span>
			        <span class="mui-navigate-right">武汉大学</span>
			    </li>
				<li style="margin-left: -4%;" class="mui-table-view-cell">
			        <span class="mui-navigate-right">评论 : </span>
			        <span id="">
			        	好评率80%
			        </span>
			    </li>						    
			    <li style="margin-left: -4%;" class="mui-table-view-cell">
			        <span class="mui-navigate-right">个人签名 : </span>
			        <span class="mui-navigate-right"></span>
			    </li>
		     	<div style="background: pink; width: 95%;font-weight: 700; padding: 10px; border-radius: 8px;  color: white;" id="">
		        	人生就像一场旅行过往的人就是风景

		       	 </div>						    
			    <li style="margin-left: -4%;" class="mui-table-view-cell">
			        <span class="mui-navigate-right">约会记录</span>
			    </li>
			    <li style="margin-left: -4%;" class="mui-table-view-cell">
			        <span class="mui-navigate-right">我的关注</span>
			    </li>
			    <li style="margin-left: -4%;" class="mui-table-view-cell">
			        <span class="mui-navigate-right">兴趣爱好</span>
			    </li>						    
			    <div >
				    <li style="margin-left: -4%;" class="mui-table-view-cell">
				        <img style="margin-top: 5px; height: 25px; width: 25px" class="mui-navigate-right"src="../images/yx.png"/>
				      	<div class="item_xq" style="background: cornflowerblue;" id="">
			        	英雄联盟
			       		 </div>
			        	<div class="item_xq" style="background: deepskyblue;" id="">
			        	王者荣耀
			        	</div>
				    </li>						    	

				    <li style="margin-left: -4%;" class="mui-table-view-cell">
				        <img style="margin-top: 5px; height: 25px; width: 25px" class="mui-navigate-right"src="../images/dianying.png"/>
				        <div class="item_xq" style="background: deepskyblue;" id="">
				        	权力的游戏
				        </div>
				    	<div class="item_xq" style="background: crimson;" id="">
				        	复仇者联盟
				        </div>
				    	<div class="item_xq" style="background: deeppink;" id="">
				        	山楂树
				     	</div>
				    </li>						        
				    <li style="margin-left: -4%;" class="mui-table-view-cell">
				        <img style="height: 25px; width: 25px" class="mui-navigate-right"src="../images/yingyue.png"/>
				       	<div class="item_xq" style="background: crimson;" id="">
				        	lovestory
				        </div>
				    	<div class="item_xq" style="background: deeppink;" id="">
				        	白茶山
				        </div>
				    	<div class="item_xq" style="background: cornflowerblue;" id="">
				        	takemehand
				        </div>
				    </li>
				    <li style="margin-left: -4%;" class="mui-table-view-cell">
				        <img style="height: 25px; width: 25px" class="mui-navigate-right"src="../images/meishi.png"/>
				        <div class="item_xq" style="background: #262626;" id="">
				        	粤菜
				        </div>
				    	<div class="item_xq" style="background: cornflowerblue;" id="">
				        	川菜
				        </div>
				    </li>							    
			        
			     <li  style="margin-left: -4%;" class="mui-table-view-cell">
			        <span class="mui-navigate-right">去过的地方</span>
			    </li>
			    <div >
			    	<div class="item_xq" style="background: deepskyblue;" id="">
			        	桂林
			        </div>
			    	<div class="item_xq" style="background: #0A2B1D;" id="">
			        	九寨沟
			        </div>
			    	<div class="item_xq" style="background: #00DD1C;" id="">
			        	三亚
			        </div>
			    	<div class="item_xq" style="background: deeppink;" id="">
			        	西藏
			        </div>						        
			        
			    </div>
			</ul>	        			
		</div>
	</div>
</div>