《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)十

實(shí)現(xiàn)學(xué)習(xí)心得選項(xiàng)卡【任務(wù)描述】1點(diǎn)擊App底部導(dǎo)航欄的“心得”，進(jìn)入學(xué)習(xí)心得頁(yè)面頂部顯示兩個(gè)Tab欄，包括學(xué)習(xí)感言和學(xué)習(xí)歷史，點(diǎn)擊不同的標(biāo)簽切換不同的信息。要求11頂部Tab的實(shí)現(xiàn)【關(guān)鍵技術(shù)描述】【制作步驟】創(chuàng)建學(xué)習(xí)感言及學(xué)習(xí)歷史頁(yè)面我們?cè)趀xperience目錄下創(chuàng)建學(xué)習(xí)感言reflection.html頁(yè)面及學(xué)習(xí)歷史history.html頁(yè)面，基本頁(yè)面代碼如下：1khref="../../css/mui.min.css"rel="stylesheet"/> <linkhref="../../css/common.css"rel="stylesheet"/> <linkhref="../../css/icons-extra.css"rel="stylesheet"/> </head> <bodystyle="padding:0.5rem;"> <divclass="mui-content"></div> <scriptsrc="../../js/mui.min.js"></script> <scriptsrc="../../js/jquery.min.js"></script> <scripttype="text/javascript"> mui.init() </script>【制作步驟】添加頂部Tab欄1.在experience.html中創(chuàng)建Tab欄，默認(rèn)選中學(xué)習(xí)感言。我們?cè)?lt;body></body>標(biāo)簽里的<header></header>標(biāo)簽中添加以下代碼：1"mui-barmui-bar-nav"> <aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a> <h1class="mui-title">學(xué)習(xí)心得</h1> <divclass="mui-segmented-controlmui-segmented-control-inverted"style="position:relative;top:44px;"> <aclass="mui-control-itemmui-active">學(xué)習(xí)感言</a> <aclass="mui-control-item">學(xué)習(xí)歷史</a> </div>給頁(yè)面元素添加mui-segmented-controlmui-segmented-control-inverted這兩個(gè)class可以實(shí)現(xiàn)tab欄的切換功能。。給其子元素添加mui-control-item可加大文字間距增強(qiáng)體驗(yàn)。說明2修改Tab欄樣式在css目錄下的common.css文件中我們?yōu)門ab欄添加樣式，實(shí)現(xiàn)當(dāng)前選中Tab欄與示例圖中一致效果?！局谱鞑襟E】添加Tab欄切換事件1.載入webview我們?cè)趀xperience.html文件里<script></script>標(biāo)簽中添加代碼引入學(xué)習(xí)感言、學(xué)習(xí)歷史頁(yè)面路徑，通過遍歷循環(huán)的方式，使用plus.webview.create方法進(jìn)行webview的載入：1pe="text/javascript"> mui.init(); mui.plusReady(function(){ letsubPages=['reflection.html','history.html'] letself=plus.webview.currentWebview() subPages.forEach(e=>{ letcurr=plus.webview.create(e,e,{ top:'122px', bottom:'0px' }) curr.hide() self.append(curr) }) plus.webview.show(subPages[0]) })</script>其中subPages數(shù)組中存放新頁(yè)面的路徑，如學(xué)習(xí)感言頁(yè)面路徑為：reflection.html，學(xué)習(xí)歷史頁(yè)面路徑為history.html。說明2綁定點(diǎn)擊事件，實(shí)現(xiàn)點(diǎn)擊學(xué)習(xí)感言，展示學(xué)習(xí)感言內(nèi)容視圖。點(diǎn)擊學(xué)習(xí)歷史，展示學(xué)習(xí)歷史內(nèi)容視圖，我們?cè)?lt;body></body>標(biāo)簽中添加以下代碼：s="mui-segmented-controlmui-segmented-control-inverted"style="position:relative;top:44px;"> <aclass="mui-control-itemmui-active"onclick="plus.webview.show('reflection.html')">學(xué)習(xí)