前端MUI+H5+HBuilderX開發APP（IOS，android），后臺Springboot,首頁，圖片輪播等，更新中（三 ）

頁面展示

代碼展示

因為蘋果手機只用主home鍵，無法回傳上一個頁面，所有添加一個帶回傳鍵的標題欄

<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">浙商大武術協會</h1>
</header>

接下來是圖片輪播，如果正常放置圖片，順序123即可，如果想要圖片輪播，則要3 123 1，讓開頭結尾知道自己回圈的上一個和下一個，部分圖片添加了鏈接，

<div class="mui-slider">
		<div class="mui-slider-group mui-slider-loop">
			<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/3.jpg" width="300" height="235"/></a></div>
			<div class="mui-slider-item"><a href="#"><img src="images/1.jpg" width="300" height="235"/></a></div>
			<div class="mui-slider-item"><a href="introduce.html"><img src="images/2.jpg" width="300" height="235"/></a></div>
			<div class="mui-slider-item"><a href="#"><img src="images/3.jpg" width="300" height="235" /></a></div>
			<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/1.jpg" width="300" height="235"/></a></div>
		</div>
	</div>
	<!-- <div class="mui-slider-indicator">
		<div class="mui-indicator mui-active"></div>
		<div class="mui-indicator"></div>
		<div class="mui-indicator"></div>
	</div> -->

再接下來是文本部分：

主要代碼快內容：

<li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="images/1.jpg">
	            <div class="mui-media-body">
	                訓練通知
	                <p class='mui-ellipsis'>從2021年3月，正式開始訓練，周二周四下午16：30開始，</p>
	            </div>
	        </a>
	    </li>

<ul class="mui-table-view">
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="images/1.jpg">
	            <div class="mui-media-body">
	                訓練通知
	                <p class='mui-ellipsis'>從2021年3月，正式開始訓練，周二周四下午16：30開始，</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="images/1.jpg">
	            <div class="mui-media-body">
	                表演通知
	                <p class='mui-ellipsis'>由于疫情影響，迎新晚會取消，大家可提前離校，祝大家新年快樂，</p>
	            </div>
	        </a>
	    </li>
		<li class="mui-table-view-cell mui-media">
		    <a href="javascript:;">
		        <img class="mui-media-object mui-pull-left" src="images/1.jpg">
		        <div class="mui-media-body">
		            補貼通知
		            <p class='mui-ellipsis'>2020年訓練結束，補貼將于2021年發放，請大家倒35幢簽字，</p>
		        </div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media">
		    <a href="javascript:;">
		        <img class="mui-media-object mui-pull-left" src="images/1.jpg">
		        <div class="mui-media-body">
		            比賽通知
		            <p class='mui-ellipsis'>浙江省大學生武術錦標賽將于2021年5月4日舉辦，</p>
		        </div>
		    </a>
		</li>
	</ul>

最下面好像沒有截到，下面是登錄和注冊

<div class="mui-row">
			<div class="mui-col-sm-8">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						納新報名    
					</a>
				</li>
			</div>
			<div class="mui-col-sm-6">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						社員登錄
					</a>
				</li>
			</div>
		</div>

作為浙商大武術協會的創始人兼兩代元老( ?? ω ?? )y，想畢業之前給自己的武術社留下一點什么，之前一直做后端，第一次接觸前端，頁面比較丑，其他大大小小的的頁面思考設計當中，但是老師已經催我了，拖延癥得改啊，😔，
不喜勿噴啊，我盡力了，如果看專案搭建，詳情見第二篇，
我還是有自知之明的，雖然寫的不是很好，但是我還是會努力的，點個贊也行，

今天2020除夕夜，祝大家順風順水有人陪，紅紅火火過大年，事事順心如意，代碼bug都是小case(^_)（畢竟沒有bug的代碼沒有挑戰）還是不要bug了，除夕夜快樂( ?? ω ?? )y