移动应用项目开发实战 课件 任务八 (实现楷模全部新闻界面)_第1页
移动应用项目开发实战 课件 任务八 (实现楷模全部新闻界面)_第2页
移动应用项目开发实战 课件 任务八 (实现楷模全部新闻界面)_第3页
移动应用项目开发实战 课件 任务八 (实现楷模全部新闻界面)_第4页
移动应用项目开发实战 课件 任务八 (实现楷模全部新闻界面)_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《移动应用与开发项目实战》任务八

实现楷模全部新闻界面【任务描述】1点击【更多新闻】点击【更多新闻】可以进入全部楷模新闻列表页面，列表内容包括标题、楷模姓名、新闻缩略图、内容(字数过多使用..代替)等，点击切换按钮，页面可以切换列表(每行一个)/栅格(每行两个)的显示方式。要求2页面向上滑动当页面向上滑动至一定高度时，在屏幕右下方位置显示返回顶部图标按钮，该按钮默认透明，随着页面的上滑逐步加深至完全不透明,点击该按钮可逐渐滑动屏幕至返回顶部，返回顶部后该按钮消失。要求1通过JQuery选择器访问页面节点【关键技术描述】2通过mui.scrollTo()方法实现页面滚动【制作步骤】创建楷模全部新闻页面创建页面根据【任务描述】，在pages目录下创建model目录并新建model.html作为楷模全部新闻页面。并在model.html文件中，写入以下代码，实现基本的楷模新闻页面。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>楷模列表页面创建【制作步骤】创建楷模全部新闻页面制作页面跳转1)当我们在首页点击【更多新闻】，可以跳转新闻楷模表页面，因此我们在home.html中的<body></body>标签中添加以下代码，实现页面跳转。2<body>...<divclass="flex-row"><divclass="red-text">楷模新闻</div><divstyle="margin-left:auto;"onclick="mui.openWindow('../model/model.html')">更多新闻</div></div>...</body>2)修改应用服务入口页面数据结构根据理解，在应用服务入口中，所包含的“楷模列表”入口，同样应当跳转至楷模全部新闻页面。而应用服务入口的页面跳转路径配置在对应的数据结构中。因此，此处应当调整home.html页面中关于servList的数据结构。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:'数据分析',imgUrl:'../../images/img_home_masses_list.png',target:'../home/analysis.html',isHide:false}]【制作步骤】页面数据渲染1<scripttype="text/javascript"> mui.init() mui.ajax('5:10091/Neusoft/times-model/appModel/app-o/list',{ dataType:'json',//服务器返回json格式数据 type:'get',//HTTP请求类型 timeout:10000,//超时时间设置为10秒； success:function(data){ console.log(data) } });…</script>获取接口数据1)根据接口文档，找到楷模新闻列表的接口信息

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

请求方式：get查询楷模列表接口根据接口文档，直接请求可以获取完整数据，由于本题未要求进行下拉数据加载动作，因此可直接加载全部数据。在model.html文件的<script><script>标签中写入如下代码：【制作步骤】页面数据渲染根据【任务描述】可知，列表内容包括标题、楷模姓名、新闻缩略图、内容(字数过多使用..代替)等，我们对页面进行渲染，在model.html文件的<script><script>标签中继续写入如下代码：2<scripttype="text/javascript">mui.init()mui.ajax('5:10091/Neusoft/times-model/appModel/app-o/list',{dataType:'json',//服务器返回json格式数据type:'get',//HTTP请求类型timeout:10000,//超时时间设置为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> 数据页面的渲染【制作步骤】显示方式切换切换事件想要实现点击切换按钮，页面可以切换列表(每行一个)/栅格(每行两个)的显示方式的切换事件。我们可以在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()方法控制元素的隐藏及显示状态，其效果等价于设置元素的display属性由于项目引用了JQuery，我们可以通过jQuery使用CSS选择器来选取HTML元素，如：$("p")选取<p>元素。$("ro")选取所有class="intro"的<p>元素。$("p#demo")选取所有id="demo"的<p>元素。通过document.getElementById("modelList")返回单个对象，但使用JQuery的id选择器时，根据JQuery机制，会返回对象数据，需要获取元素对象需要使用$('#modelList')[0]说明【制作步骤】显示方式切换样式调整显然我们想要实现切换相应切换效果，我们需要在css目录下的common.css文件中添加如下代码，以完成栅格状态的显示。2.itemGrid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:0.5rem;}.itemGridimg{height:100px;}数据页面的渲染【制作步骤】实现首页回到顶部功能添加页面元素实现首页回到顶部功能，我们可以先在home.html中的MUI内容区域新增向上图标元素，我们可以点击该元素回到顶部。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【制作步骤】实现首页回到顶部功能添加滚动事件接着我们在home.html原本的滚动事件中，添加关于回到顶部的事件。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. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论