1. 程式人生 > >MUI tab-bar 頂部選項卡-可左右滑動

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>