移動應(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頁，還剩8頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

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

實現(xiàn)楷模全部新聞界面【任務(wù)描述】1點擊【更多新聞】點擊【更多新聞】可以進入全部楷模新聞列表頁面，列表內(nèi)容包括標題、楷模姓名、新聞縮略圖、內(nèi)容(字數(shù)過多使用..代替)等，點擊切換按鈕，頁面可以切換列表(每行一個)/柵格(每行兩個)的顯示方式。要求2頁面向上滑動當頁面向上滑動至一定高度時，在屏幕右下方位置顯示返回頂部圖標按鈕，該按鈕默認透明，隨著頁面的上滑逐步加深至完全不透明,點擊該按鈕可逐漸滑動屏幕至返回頂部，返回頂部后該按鈕消失。要求1通過JQuery選擇器訪問頁面節(jié)點【關(guān)鍵技術(shù)描述】2通過mui.scrollTo()方法實現(xiàn)頁面滾動【制作步驟】創(chuàng)建楷模全部新聞頁面創(chuàng)建頁面根據(jù)【任務(wù)描述】，在pages目錄下創(chuàng)建model目錄并新建model.html作為楷模全部新聞頁面。并在model.html文件中，寫入以下代碼，實現(xiàn)基本的楷模新聞頁面。1<!doctypehtml><html><head><metacharset="utf-8"><title></title><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><linkhref="../../css/mui.min.css"rel="stylesheet"/><linkhref="../../css/common.css"rel="stylesheet"/><linkhref="../../css/icons-extra.css"rel="stylesheet"/></head><bodystyle="padding:0.5rem;"><headerclass="mui-barmui-bar-navflex-row"><h1class="mui-title">楷模列表</h1><div></div><spanclass="mui-iconmui-icon-bars"id="icoGrid"></span><spanclass="mui-icon-extramui-icon-extra-class"id="icoList"></span></header><divclass="mui-content"><divclass="itemList"id="modelList"></div></div><scriptsrc="../../js/mui.min.js"></script><scriptsrc="../../js/jquery.min.js"></script><scripttype="text/javascript">mui.init()</script></body></html>楷模列表頁面創(chuàng)建【制作步驟】創(chuàng)建楷模全部新聞頁面制作頁面跳轉(zhuǎn)1)當我們在首頁點擊【更多新聞】，可以跳轉(zhuǎn)新聞楷模表頁面，因此我們在home.html中的<body></body>標簽中添加以下代碼，實現(xiàn)頁面跳轉(zhuǎn)。2<body>...<divclass="flex-row"><divclass="red-text">楷模新聞</div><divstyle="margin-left:auto;"onclick="mui.openWindow('../model/model.html')">更多新聞</div></div>...</body>2)修改應(yīng)用服務(wù)入口頁面數(shù)據(jù)結(jié)構(gòu)根據(jù)理解，在應(yīng)用服務(wù)入口中，所包含的“楷模列表”入口，同樣應(yīng)當跳轉(zhuǎn)至楷模全部新聞頁面。而應(yīng)用服務(wù)入口的頁面跳轉(zhuǎn)路徑配置在對應(yīng)的數(shù)據(jù)結(jié)構(gòu)中。因此，此處應(yīng)當調(diào)整home.html頁面中關(guān)于servList的數(shù)據(jù)結(jié)構(gòu)。servList=[{name:'楷模列表',imgUrl:'../../images/img_home_model_list.png',target:'../model/model.html',isHide:false},{name:'英雄故事',imgUrl:'../../images/img_home_hero_list.png',target:'../template/white.html',isHide:false},{name:'身邊英雄',imgUrl:'../../images/img_home_around_list.png',target:'../template/white.html',isHide:false},{name:'公益活動',imgUrl:'../../images/img_home_material_list.png',target:'../template/white.html',isHide:false},{name:'數(shù)據(jù)分析',imgUrl:'../../images/img_home_masses_list.png',target:'../home/analysis.html',isHide:false}]【制作步驟】頁面數(shù)據(jù)渲染1<scripttype="text/javascript"> mui.init() mui.ajax('5:10091/Neusoft/times-model/appModel/app-o/list',{ dataType:'json',//服務(wù)器返回json格式數(shù)據(jù) type:'get',//HTTP請求類型 timeout:10000,//超時時間設(shè)置為10秒； success:function(data){ console.log(data) } });…</script>獲取接口數(shù)據(jù)1)根據(jù)接口文檔，找到楷模新聞列表的接口信息

請求地址：/appModel/app-o/list

請求方式：get查詢楷模列表接口根據(jù)接口文檔，直接請求可以獲取完整數(shù)據(jù)，由于本題未要求進行下拉數(shù)據(jù)加載動作，因此可直接加載全部數(shù)據(jù)。在model.html文件的<script><script>標簽中寫入如下代碼：【制作步驟】頁面數(shù)據(jù)渲染根據(jù)【任務(wù)描述】可知，列表內(nèi)容包括標題、楷模姓名、新聞縮略圖、內(nèi)容(字數(shù)過多使用..代替)等，我們對頁面進行渲染，在model.html文件的<script><script>標簽中繼續(xù)寫入如下代碼：2<scripttype="text/javascript">mui.init()mui.ajax('5:10091/Neusoft/times-model/appModel/app-o/list',{dataType:'json',//服務(wù)器返回json格式數(shù)據(jù)type:'get',//HTTP請求類型timeout:10000,//超時時間設(shè)置為10秒；success:function(data){data.rows.forEach(e=>{document.getElementById("modelList").innerHTML+=`<divclass="mui-card"><imgsrc="${'5:10091/Neusoft/times-model/'+e.picPath}"><divclass="meta"><divclass="big-textno-wrap">${e.title}</div><divclass="small-text"style="margin:0.5rem0;">楷模姓名:${e.modelName}</div><divclass="no-wrap">${e.content}</div></div></div>`})}});…</script> 數(shù)據(jù)頁面的渲染【制作步驟】顯示方式切換切換事件想要實現(xiàn)點擊切換按鈕，頁面可以切換列表(每行一個)/柵格(每行兩個)的顯示方式的切換事件。我們可以在model.html文件中<script></script>標簽中，寫入以下代碼（見圖7-4）：1<scripttype="text/javascript">mui.init()$('#icoGrid').hide()$('#icoList').click(e=>{$('#icoList').hide()$('#icoGrid').show()$('#modelList')[0].classList.remove('itemList')$('#modelList')[0].classList.add('itemGrid')})$('#icoGrid').click(e=>{$('#icoGrid').hide()$('#icoList').show()$('#modelList')[0].classList.add('itemList')$('#modelList')[0].classList.remove('itemGrid')})…</script>通過JQuery的hide()及show()方法控制元素的隱藏及顯示狀態(tài)，其效果等價于設(shè)置元素的display屬性由于項目引用了JQuery，我們可以通過jQuery使用CSS選擇器來選取HTML元素，如：$("p")選取<p>元素。$("ro")選取所有class="intro"的<p>元素。$("p#demo")選取所有id="demo"的<p>元素。通過document.getElementById("modelList")返回單個對象，但使用JQuery的id選擇器時，根據(jù)JQuery機制，會返回對象數(shù)據(jù)，需要獲取元素對象需要使用$('#modelList')[0]說明【制作步驟】顯示方式切換樣式調(diào)整顯然我們想要實現(xiàn)切換相應(yīng)切換效果，我們需要在css目錄下的common.css文件中添加如下代碼，以完成柵格狀態(tài)的顯示。2.itemGrid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:0.5rem;}.itemGridimg{height:100px;}數(shù)據(jù)頁面的渲染【制作步驟】實現(xiàn)首頁回到頂部功能添加頁面元素實現(xiàn)首頁回到頂部功能，我們可以先在home.html中的MUI內(nèi)容區(qū)域新增向上圖標元素，我們可以點擊該元素回到頂部。1body>...<divclass="mui-content"> <spanclass="mui-iconmui-icon-arrowupto-top-btn"id="toTop"></span>…</div>...</body>.to-top-btn{position:fixed;right:1rem;bottom:1rem;width:3rem;height:3rem;font-size:2rem;background-color:#CF2D28;border-radius:50%;color:white;display:flex;justify-content:center;align-items:center;opacity:0;z-index:99;}添加樣式之后我們在common.css中為向上圖標新增如下樣式：2【制作步驟】實現(xiàn)首頁回到頂部功能添加滾動事件接著我們在home.html原本的滾動事件中，添加關(guān)于回到頂部的事件。3window.onscroll=e=>{…document.getElementById("toTop").style.opacity=pageYOffset/232letrect=document.getElementById("loading").getBoundingClientRect()letheight=document.documentElement.clientHeightif(rect.bottom<height){getNewsData()}}<scripttype="text/javascript">…document.getElementById('toTop')

溫馨提示

  • 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)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論