上一章:mui开发app教程-1
目录
2、plus.webview.currentWebview().append()
功能1:选项卡事件绑定
上一章,说了给当前的app添加选项卡,但是这个时候的选项卡,除了点击颜色会变之外,没有其他的功能了。但是实际上我们用app的时候,点击选项卡的选项的时候,会跳转到对应的页面。注意,这边说的是跳转页面,因为mui的官方给的demo其实就是在当前同一个页面里头跳来跳去,有点像vue的路由。
选项卡绑定页面链接
要跳转的页面要实现创建好
创建页面
选项卡绑定链接
其实就是给选项卡的a标签添加href属性值
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="html/home.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="html/message.html">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="html/sign.html">
<span class="mui-icon mui-icon-list"></span>
<span class="mui-tab-label">点名</span>
</a>
<a class="mui-tab-item" href="html/contact.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">联系人</span>
</a>
<a class="mui-tab-item" href="html/notice.html">
<span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-tab-label">通知</span>
</a>
</nav>
主板页面设计
主板页面就是在第一屏的页面,总共有5个,包括首页,消息,点名,联系人,通知。
页面的显示需要使用
1、plus.webview.create
表示创建一个子窗口,没错,就是把选项卡页面当做主窗口,其他的主板页面当做主窗口的子窗口,这些子页面都是通过该方式来生成。(生成的时候需要注意设置子页面的位置)
2、plus.webview.currentWebview().append()
表示将子窗口添加到主窗口。
3、plus.webview.show
表示显示被隐藏的已经创建好的子窗口
4、plus.webview.hide
表示隐藏被显示的已经创建好的子窗口
代码实现
上一个步骤的关键代码如下:
// 全局子页面在主页面的位置样式
var subpage_style = {
top: '0px',
bottom: '51px',
};
// 下面的代码写在mui.plusReady里头
var self = plus.webview.currentWebview();
//当前激活选项
var activeTab = "html/home.html";
var current = plus.webview.getWebviewById(activeTab);
if (current==null) {
current = plus.webview.create(activeTab, activeTab, subpage_style);
self.append(current);
} else {
current.show();
}
var aniShow = {};
aniShow[activeTab] = "true";
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if(targetTab == activeTab) {
return;
}
//显示目标选项卡
//若为iOS平台或非首次显示,则直接显示
if(mui.os.ios || aniShow[targetTab]) {
if (plus.webview.getWebviewById(targetTab)==null) {
var current = plus.webview.create(targetTab, targetTab, subpage_style);
self.append(current);
} else {
plus.webview.show(targetTab);
}
} else {
//否则,使用fade-in动画,且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow, temp);
if (plus.webview.getWebviewById(targetTab)==null) {
var current = plus.webview.create(targetTab, targetTab, subpage_style);
self.append(current);
} else {
plus.webview.show(targetTab, "fade-in", 300);
}
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
选项卡点击测试
往刚刚创建好的每个子页面里头添加一些不一样的文字。
点击选项卡,可以看到点击不同选项卡,显示对应页面的内容。那么就成功了
功能2:app-状态栏布局
沉浸式于非沉浸式
现有的app的状态栏布局整体有两种:
1、采用沉浸式
这种方式:app的内容会融入到状态栏,如:
2、采用非沉浸式
这种方式:app的内容会呈现在状态栏下方,如:
总结:
说白了,就是状态栏要不要呈现内容,比如我们看优酷视频的时候,顶部的状态栏也有视频影像。
开启沉浸式
本次我要做的app大概是一个校园工具类的app,我打算采用沉浸式布局。可以通过manifest设置全局范围内都使用沉浸式布局。
配置文件位置
配置内容
参数解释:
immersed:开启沉浸式
style:设置状态栏样式(light:表示状态文字颜色为白色)
background:设置状态栏背景色
"statusbar": {
"immersed": "supportedDevice",
"style": "light",
"background" : "#fff"
},
效果验收
配置完之后,重新运行项目,会发现,子窗口里头的内容会顶到整个页面的最上方,即部分文字和状态栏的系统文字信息重叠了,那么设置就成功了。
功能3:app页面模板设计
上一步,我们已经完成了对app的基础的所有配置。那么为了后续开发方便,我们必须明确所有(或者大部分)的页面的共有风格。
我这边定下来的风格大概就是跟qq或者企业微信一样的效果。
即:
风格设计
第一屏页面
顶部显示title,中间是内容,下面是选项卡
新开页面
新开页面就是只由第一屏页面点击打开的页面,这种页面一般么有选项卡。布局就比较简单了:顶部显示title,中间是内容。
顶部title区域设计
html代码
顶部title我设置的色调是浅蓝色,然后是直接使用mui给的顶部导航栏模板,并在class里头添加了一个mui-fix-bar的样式(这个样式是用来重写mui关于导航栏的默认样式的)
<header class="mui-bar mui-bar-nav mui-fix-bar">
<h1 class="mui-title">首页</h1>
</header>
css代码
默认的导航栏的高度是44,颜色是白色,而且是带有阴影的,这不是我想要的效果。所以同构mui-fix-bar样式名,我在mui.css里头新增了一条样式表,来覆盖默认的样式,同时重写mui-title的样式:
.mui-fix-bar {
height: 60px!important;
background-color: #007AFF!important;
padding-top: 20px;
box-shadow: 0 0 0;
}
/* 将文字颜色覆盖为白色 */
.mui-fix-bar .mui-title{
color: white!important;
}
效果
这边有些人可能纠结你们的正文内容被导航栏覆盖的问题,这个别担心,下面会讲到。
中间内容区域设计
中间内容区域很多人到现在还是不理解,到底是哪是哪。哈哈,莫急,我来解释:
位置分析
中间区域就是扣除掉顶部title区域和底部选项卡区域,剩余的你能看的到的区域就是中间内容区域。
下面图解的:黄色表示顶部区域,绿色表示中间内容区域,红色表示底部选项卡区域
子窗口区域
子窗口区域就是黄+绿,就是顶部区域+黄色区域
我们通过固定定位,将顶部固定,将中间固定,以此来完全占据整个子窗口
html代码
中间区域的代码,我自己设计如下(加了一个样式名mui-body,用来在mui.css里头设置全局的样式):
<section class="mui-body">
首页<br>
<h1>测试一下</h1>
</section>
css代码
.mui-body{
padding-top: 5px;
position: fixed;
top: 60px;
}