移動應(yīng)用項目開發(fā)實戰(zhàn) 課件 任務(wù)四（實現(xiàn)輪播圖及楷模公告功能）_第1頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件 任務(wù)四（實現(xiàn)輪播圖及楷模公告功能）_第2頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件 任務(wù)四（實現(xiàn)輪播圖及楷模公告功能）_第3頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件 任務(wù)四（實現(xiàn)輪播圖及楷模公告功能）_第4頁
移動應(yīng)用項目開發(fā)實戰(zhàn) 課件 任務(wù)四（實現(xiàn)輪播圖及楷模公告功能）_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

《移動應(yīng)用與開發(fā)項目實戰(zhàn)》任務(wù)四

實現(xiàn)輪播圖及楷模公告功能【任務(wù)描述】1進入手機App主頁面（首頁）首頁面上方顯示輪播圖（能夠?qū)崿F(xiàn)循環(huán)輪播的效果）要求2輪播圖下方顯示服務(wù)入口部分楷模公告部分左側(cè)顯示“楷模公告”四字，文字以每行兩個字的方式展示，右側(cè)顯示公告標(biāo)題和公告內(nèi)容（字?jǐn)?shù)過多用…代替）。要求11.slider(輪播)組件的使用【關(guān)鍵技術(shù)描述】22.在slider(輪播)組件中實現(xiàn)循環(huán)輪播33.

【進階】頁面滾動window.onscroll()事件的監(jiān)聽【制作步驟】認(rèn)識并使用MUI組件閱讀任務(wù)描述通過閱讀【任務(wù)描述】可以確定，我們在實現(xiàn)輪播圖及楷模公告功能時會用到以下畫面元素：1.輪播圖2.滾動條指示器3.公告卡片11對照官方文檔將以上畫面元素對照MUI官方文檔進行對照，不難發(fā)現(xiàn)：1)輪播圖可以使用MUI官網(wǎng)提供的輪播slide（輪播組件）實現(xiàn):/mui/ui/#slide2)滾動條指示器可以使用MUI官網(wǎng)提供的scoll（區(qū)域滾動）中橫向滾動實現(xiàn):/mui/ui//#scroll3)公告卡片可以使用MUI提供的cardview（卡片視圖）實現(xiàn)：/mui/ui//#cardview通過了解以上控件，我們可以將其應(yīng)用至輪播圖及楷模公告的制作。【制作步驟】輪播圖制作輪播圖頁面元素的構(gòu)建根據(jù)在pages目錄下home目錄中home.html的<body></body>標(biāo)簽中引入MUI內(nèi)容區(qū)域，添加如下代碼：1<divid="slider"class="mui-slider"> <divclass="mui-slider-groupmui-slider-loop" id="sliderList"></div><!--滾動條指示器--> <divclass="mui-slider-indicator"> <divclass="mui-indicatormui-active"></div> <divclass="mui-indicator"></div> <divclass="mui-indicator"></div> </div></div>建立一個空的“mui-slider-group”存放輪播圖，后續(xù)通過接口獲取輪播數(shù)據(jù)，并設(shè)置到這個DOM中?！癿ui-slider-indicator”用于配置輪播圖下方的指示器，此處直接構(gòu)建了三個“mui-indicator”，并將第一個設(shè)置為“mui-active”，即選中狀態(tài)。由于<divclass="mui-indicator"></div>：這是另外兩個輪播指示器的項目，它們表示未被選中的輪播項。說明【制作步驟】輪播圖的數(shù)據(jù)獲取根據(jù)提供的請求地址，通過訪問接口，獲取輪播圖的相關(guān)數(shù)據(jù)。服務(wù)器的地址：5:10091/Neusoft/times-model請求地址：/appNotice/app-o/loopMap請求方式：get請求參數(shù)：無2根據(jù)以上接口信息，在home.html文件<body></body>標(biāo)簽中的<script></script>標(biāo)簽中編寫輪播圖請求接口代碼如下://ajax請求以獲取輪播圖數(shù)據(jù)

mui.ajax('5:10091/Neusoft/times-model/appNotice/app-o/loopMap',{ dataType:'json',//服務(wù)器返回json格式數(shù)據(jù)

type:'get',//HTTP請求類型

timeout:10000,//超時時間設(shè)置為10秒；

success:function(res){//獲取從服務(wù)器返回的res對象，其中包含了一些數(shù)據(jù)。

console.log(res); } });【制作步驟】輪播圖的數(shù)據(jù)獲取success:function(res){ //服務(wù)器ip地址

letip="5:10091/Neusoft/times-model"; //在末尾添加一個數(shù)據(jù)用于循環(huán)效果

res.data.push(res.data[0] //在開頭添加一個數(shù)據(jù)用于循環(huán)效果 res.data.unshift(res.data[res.data.length-2]); //動態(tài)生成輪播圖項

res.data.forEach((e,i)= document.getElementById("sliderList").innerHTML+=` <divclass="mui-slider-item${i==0||i==res.data.length-1?'mui-slider-item-duplicate':''}"> <imgsrc="${ip+e.picPath}"> <div style="position:relative;z-index:10;height:3rem; margin-top:-3.3rem;background-color:rgba(0,0,0,0.5);color:white;"> ${e.title} </div> </div>` });//初始化輪播圖，設(shè)置每隔3000ms切換一張圖片

mui('.mui-slider').slider({ interval:3000 }) },根據(jù)MUI輪播圖機制，若要支持循環(huán)，則需要在.mui-slider-group節(jié)點上增加.mui-slider-loop類，同時需要重復(fù)增加2張圖片，圖片順序變?yōu)?-1-2-3-1，同時首尾兩張圖片增加.mui-slider-item-duplicate類。輪播圖下方的遮罩區(qū)域樣式采用rgba的形式置為半透明，并通過margin-top的負(fù)值及設(shè)置堆疊順序z-index，使其遮擋在圖片上方。在進行畫面渲染的字符串操作時，使用反單引號配合${}實現(xiàn)變量與固定內(nèi)容的拼接。由于接口獲取的圖片大小不盡相同，故需設(shè)置CSS樣式，規(guī)定圖片統(tǒng)一高度，確保畫面美觀。在css目錄下的common.css中設(shè)置如下樣式：說明.mui-slider-itemimg{ height:200px;}【制作步驟】楷模公告制作楷模公告畫面的制作使用cardview（卡片視圖）組件構(gòu)建楷模公告的畫面制作。在pages目錄下的home.html文件寫入，并在<body></body>標(biāo)簽中的MUI內(nèi)容區(qū)域添加（卡片視圖）組件，用組件實現(xiàn)【任務(wù)描述】要求中的楷模公告部分左側(cè)顯示“楷模公告”四字，文字以每行兩個字的方式展示。1<!--卡片視圖--><divstyle="padding:0.5rem;"> <divclass="mui-card" style="padding:0.5rem;height:100px;border-radius:20px;align-items:center;display:flex;"> <divstyle="margin:1rem;"> <divclass="big-text"style="color:#CF2D28;">楷模</div> <divclass="big-text">公告</div> </div> <divclass="line-col"style="height:80%;"></div> <divstyle="width:1px;flex:11auto;"id="notice"></div> </div> </div>頁面中運用了多個自定義類，需要在css目錄下的common.css中添加樣式。在notice區(qū)域，用于顯示從接口獲取的楷模公告。注：每次獲取到數(shù)據(jù)并完成樣式時，需要刷新一下。說明【制作步驟】楷模公告制作2數(shù)據(jù)獲取及頁面渲染1)根據(jù)請求地址訪問接口，獲取楷模公告的頁面文字?jǐn)?shù)據(jù)。請求地址：/appNotice/app-o/modelNotice請求方式：get請求參數(shù)：無2)在pages目錄下的home.html文件中的<body></body>標(biāo)簽<script></script>中編寫請求接口代碼如下://ajax請求以獲取公告數(shù)據(jù)

mui.ajax('5:10091/Neusoft/times-model/appNotice/app-o/modelNotice',{ dataType:'json',//服務(wù)器返回json格式數(shù)據(jù)

type:'get',//HTTP請求類型

timeout:10000,//超時時間設(shè)置為10秒；

success:function(res){ console.log(res) } });3)將文字?jǐn)?shù)據(jù)渲染至畫面，寫入<script></script>標(biāo)簽中l(wèi)ete=res.data[0] document.getElementById("notice").innerHTML+=` <divclass="big-textno-wrap">${e.title}</div> <divclass="small-textno-wrap"style="margin-top: 0.5rem;">${e.content}</div>`【制作步驟】楷模公告制作從接口獲取到多條楷模公告數(shù)據(jù)，在此，我們展示第一條數(shù)據(jù)。根據(jù)題目要求，超出頁面顯示部分，用…代替，故在css目錄下的common.css中，添加添加no-wrap類樣式，添加代碼如下：其中white-space設(shè)置為在一行內(nèi)強制顯示所有文本，text-overflow屬性設(shè)置為多余文本顯示省略標(biāo)記，同時overflow設(shè)置為超出顯示范圍隱藏。（注：三個屬性須配合使用，缺一不可）說明.no-wrap{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}【擴展優(yōu)化】頂部展示文字制作在頁面頂部導(dǎo)航欄和輪播圖中間位置需有一行展示文字，如：“學(xué)習(xí)雷鋒同志，弘揚雷鋒精神”的文字案例，呈現(xiàn)效果以字體白色，背景紅色為主，我們需要在home.html文件里的<body></body>標(biāo)簽中輪播圖組件上方的MUI內(nèi)容區(qū)域添加如下代碼：3<divclass="center"style="width:100%;height:2rem;background-color: #CF2D28;color:white;">

學(xué)習(xí)雷鋒同志,弘揚雷鋒精神

</div>

在css目錄下的common.css文件中添加如下代碼：.center{ display:flex; justify-content:center; align-items:center;}

【進階提升】完整要求及分析完整要求進入App主頁面(首頁)，上方顯示輪播圖，當(dāng)頁面上滑時，輪播圖逐漸透明直至消失，當(dāng)頁面下滑時，輪播圖逐漸顯示直至完全不透明,輪播圖下方顯示楷模公告部分，楷模公告部分左側(cè)顯示“楷模公告”四字，該四字以每行兩個字的方式展示，右側(cè)顯示公告標(biāo)題和公告內(nèi)容(字?jǐn)?shù)過多用...代替)。2.要求分析紅色部分為進階內(nèi)容要求，根據(jù)要求可以得出，當(dāng)頁面滾動時，需要輪播圖的透明度隨著改變。3.難度：★1【進階提升】效果實現(xiàn)根據(jù)題目要求，我們需要監(jiān)聽整體頁面的滾動，以實現(xiàn)在不同畫面位置設(shè)置輪播圖的透明度。其中，監(jiān)聽畫面滾動可以通過window.onscroll進行監(jiān)聽，而透明度則通過CSS中的opacity屬性控制（從0.0（完全透明）到1.0（完全不透明））。在pages目錄下的home.html文件中<script></script>標(biāo)簽內(nèi)添加如下代碼1window.onscroll=e=>

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論