移动应用项目开发实战 课件 任务三（实现底部导航栏功能）_第1页
移动应用项目开发实战 课件 任务三（实现底部导航栏功能）_第2页
移动应用项目开发实战 课件 任务三（实现底部导航栏功能）_第3页
移动应用项目开发实战 课件 任务三（实现底部导航栏功能）_第4页
移动应用项目开发实战 课件 任务三（实现底部导航栏功能）_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

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

文档简介

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

实现底部导航功能【任务描述】1实现底部导航栏功能：显示底部导航栏，采用图标加文字方式显示，图标在上，文字在下，共五个图标+文字组合，分别为首页、视频、心得、数据分析和我的。要求点击标签进入相应页面，并借用颜色标记当前页面所在导航栏标签的icon和名称。要求1tabbar(选项卡)组件的使用【关键技术描述】2icon(图标)组件的使用3tabbar(选项卡)组件的webview切换显示实现4onclick（事件）用户点击导航项时要执行的操作5CSS3动画的使用进阶【制作步骤】创建底部导航栏样式通过阅读【任务描述】板块，可以确定在制作底部导航栏时，我们会涉及到MUI组件以下组件的使用：1)tabbar(选项卡):MUI官网【首页】（/mui）在我们初始框架DigitalLife项目中参照examples文件夹中的tabbar.html文件，创建底部导航栏样式。（也可通过MUI官网【首页】选择【底部导航卡—div模式】后，使用控制台（F12）在元素选显卡选中底部导航栏查看源码。

2)icon（图标）

底部导航栏图标可以使用MUI提供的icon（图标）来实现。1/mui/ui/#icon底部导航卡官网源码【制作步骤】创建底部导航栏样式接下来我们用代码开始实现，在pages目录下的home子目录中，修改index.html页面。

在<head></head>标签中定义画面的分辨率，引用通用CSS文件及图标文件。2<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HelloMUI</title><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><!--标准mui.css--><linkrel="stylesheet"href="../../css/mui.min.css"><!--引入common.css文件--><linkrel="stylesheet"href="../../css/common.css"></head>...</html>

【制作步骤】创建底部导航栏样式在<body></body>标签中引用mui.min.js(MUI封装的JavaScript文件）。3<!DOCTYPEhtml><html> <head><metacharset="utf-8"><title>HelloMUI</title><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><!--标准mui.css--><linkrel="stylesheet"href="../../css/mui.min.css"><!--引入common.css文件--><linkrel="stylesheet"href="../../css/common.css"><body><!--引入MUI封装的JavaScript文件--><scriptsrc="../../js/mui.js"></script><scripttype="text/javascript">mui.init()</script></body></html>【制作步骤】创建底部导航栏样式在<body></body>标签中引用<header></header>标签，用于显示界面顶部状态栏。4<!DOCTYPEhtml><html> ...<body><!--加入头信息--><headerclass="mui-barmui-bar-nav"style="background-color:white;"><!--顶部标题栏返回箭头--><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><h1class="mui-title">首页</h1></header><!--引入MUI封装的JavaScript文件--><scriptsrc="../../js/mui.min.js"></script>...</body></html>

界面顶部导航栏【制作步骤】创建底部导航栏样式在<body></body>标签中加入tabbar组件5默认的底部导航栏<body><headerclass="mui-barmui-bar-nav"style="background-color:white;"><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><h1class="mui-title">首页</h1></header><scriptsrc="../../js/mui.min.js"></script><navclass="mui-barmui-bar-tab"> <aclass="mui-tab-itemmui-active"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首页</span></a> <aclass="mui-tab-item"><spanclass="mui-iconmui-icon-videocam"></span><spanclass="mui-tab-label">视频</span></a> <aclass="mui-tab-item"><spanclass="mui-iconmui-icon-compose"></span>spanclass="mui-tab-label">心得</span> </a> <aclass="mui-tab-item"><spanclass="mui-iconmui-icon-pengyouquan"></span><spanclass="mui-tab-label">数据分析</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-contact"></span><spanclass="mui-tab-label">我的</span> </a></nav></body>【制作步骤】创建底部导航栏样式1A.添加类“mui-active”的a标签元素，会处于默认选中的状态；B..由于MUI默认的主题色为蓝色，此次项目主题色为红色，因此我们需要在CSS目录下的common.css文件中添加“mui-active”对应的颜色，添加如下代码：.mui-bar-tab.mui-tab-item.mui-active{ color:#CF2D28;}C.所需要用到的icon图标可以在MUI官网找到/mui/ui/#icon说明底部导航栏【制作步骤】添加Tab栏切换事件根据【任务描述】要求，实现“点击标签的icon（图标）进入相应页面”的功能。首先，要掌握onclick（点击事件）的相关知识，用来实现页面跳转。接下来我们要在pages目录下新建目录和html文件。操作步骤如下:

首先，在pages目录下的home目录中新建home.html页面作为首页内容，如图所示。1新建home.html文件【制作步骤】添加Tab栏切换事件其次，在home.html中，引用CSS和JS文件,并在顶部标题栏中显示页面名称即可。分别在<head></head>标签引入CSS和在<body></body>标签中引入JS文件：2<!doctypehtml><html><head><metacharset="utf-8"><title></title><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><!--引入css--> <linkhref="../../css/mui.min.css"rel="stylesheet"/> <linkhref="../../css/common.css"rel="stylesheet"/></head><body><!--引入JS文件--><scriptsrc="../../js/mui.min.js"></script><scripttype="text/javascript">mui.init();</script></body></html>

【制作步骤】添加Tab栏切换事件在<body></body>标签中加入<header></header>标签和MUI内容域，用于在顶部标题栏中显示页面标题。2<!doctypehtml><html><body><!--顶部标题栏中显示页面名称--><headerclass="mui-barmui-bar-nav"><!--顶部标题栏返回箭头--> <aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a> <h1class="mui-title">首页</h1></header><!--MUI内容域--><divclass="mui-content"></div><!--引入JS文件--> <scriptsrc="../../js/mui.min.js"></script> <scripttype="text/javascript">mui.init();</script></body></html>

【制作步骤】添加Tab栏切换事件首页基础页面的完整代码如下（home目录下的home.html）3<!doctypehtml><html><head><metacharset="utf-8"><title></title><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><linkhref="../../css/mui.min.css"rel="stylesheet"/><linkhref="../../css/common.css"rel="stylesheet"/></head><body><!--顶部标题栏中显示页面名称--><headerclass="mui-barmui-bar-nav"><!--顶部标题栏返回箭头--><aclass="mui-action-backmui-iconmui-icon-left-nav mui-pull-left"></a><h1class="mui-title">首页</h1> </header> <divclass="mui-content"> </div> <scriptsrc="../../js/mui.min.js"></script> <scripttype="text/javascript">mui.init()</script></body></html>【制作步骤】添加Tab栏切换事件接下来依次创建pages目录下的子目录：视频页面：创建video目录，并在其中创建videos.html4新建videos.html文件以首页基础页面的完整代码为标准，添加修改内容如下：<body><!--顶部标题栏中显示页面名称--><headerclass="mui-barmui-bar-nav"><!--顶部标题栏中返回箭头--> <aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><!--页面名称:视频--> <h1class="mui-title">视频</h1></header>...</body>【制作步骤】添加Tab栏切换事件心得页面：创建experience目录，并在其中创建experience.html5新建experirence.html文件<body><!--顶部标题栏中显示页面名称--><headerclass="mui-barmui-bar-nav"><!--顶部标题栏中返回箭头--> <aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><!--页面名称:心得--><h1class="mui-title">心得</h1></header>...</body>以首页基础页面的完整代码为标准，添加修改内容如下：【制作步骤】添加Tab栏切换事件数据分析页面：在home目录下创建analysis.html6新建analysis.html文件以首页基础页面的完整代码为标准，添加修改内容如下：<body><!--顶部标题栏中显示页面名称--><headerclass="mui-barmui-bar-nav"><!--顶部标题栏中返回箭头--><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><!--页面名称:数据分析--><h1class="mui-title">数据分析</h1></header>...</body>【制作步骤】添加Tab栏切换事件我的页面：创建user目录并新建user.html7新建user.html文件以首页基础页面的完整代码为标准，添加修改内容如下：<body><!--顶部标题栏中显示页面名称--><headerclass="mui-barmui-bar-nav"><!--顶部标题栏中返回箭头--><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><!--页面名称:我的--><h1class="mui-title">我的</h1></header>...</body>【制作步骤】实现底部导航栏功能根据首页底部导航栏的切换规则，无法使用mui.openWindow()方法实现。我们需要在当前webview中，将新建的页面提前载入。在（onclick）点击事件时，展示出对应的webview即可。具体方法如下：载入tabbar（选择卡）组件的webview修改home目录中index.html页面，在index.html页面<script></script>标签中引入以上新建页面的路径，然后通过遍历循环的方式，使用plus.webview.create方法进行webview的载入，具体代码如下。1<body><scripttype="text/javascript">mui.init();mui.plusReady(function(){letsubPages=['../home/home.html','../video/videos.html','../experience/experience.html','../home/analysis.html','../user/user.html'] letself=plus.webview.currentWebview() subPages.forEach(e=>{ letcurr=plus.webview.create(e,e,{top:'0px',bottom:'45px'}) curr.hide() self.append(curr)})plus.webview.show(subPages[0])})</script></body>【制作步骤】实现底部导航栏功能1其中subPages数组中存放新建各页面的路径，如首页页面路径为：../home/home.html，任务页面路径为'../video/videos.html，心得页面路径为：../experience/experience.html，数据分析页面路径为../home/analysis.html，我的页面路为：../user/user.html。plus.webview.currentWebview()可获取当前webview，各页面通过plus.webview.create()方法载入当前webview中。plus.webview.show(subPages[0])表示导航栏初始化时，显示数组中第一个路径也就是首页的地址。说明【制作步骤】实现底部导航栏功能绑定点击事件绘制完成页面后，我们需要为页面对应的控件绑定运行事件，以实现对应的功能。根据需求我们要对底部导航栏做点击事件,因此实现点击标签进入对应页面。在以下案例中，我们通过在html中的dom节点，直接绑定onclick点击事件的形式来实现按钮绑定，以最大限度节约代码量。修改index.html页面，在<nav></nav>标签的<a></a>标签中，绑定onclick事件实现页面跳转效果。2【制作步骤】实现底部导航栏功能2<body><navclass="mui-barmui-bar-tab"><aclass="mui-tab-itemmui-active"onclick="plus.webview.show('../home/home.html')"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首页</span></a><aclass="mui-tab-item"onclick="plus.webview.show('../video/videos.html')"><spanclass="mui-iconmui-icon-videocam"></span><spanclass="mui-tab-label">视频</span> </a> <aclass="mui-tab-item"onclick="plus.webview.show('../experience/experience.html')"><spanclass="mui-iconmui-icon-compose"></span><spanclass="mui-tab-label">心得</span> </a> <aclass="mui-tab-item"onclick="plus.webview.show('../home/analysis.html')"><spanclass="mui-iconmui-icon-pengyouquan"></span><spanclass="mui-tab-label">数据分析</span></a><aclass="mui-tab-item"onclick="plus.webview.show('../user/user.html')"><spanclass="mui-icon

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论