first commit
This commit is contained in:
commit
da562ff827
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"version" : "1.0",
|
||||||
|
"configurations" : [
|
||||||
|
{
|
||||||
|
"playground" : "custom",
|
||||||
|
"type" : "uni-app:app-android"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
## tab选项卡示例教程-nativeObj原生模式tab（含底部凸起大图标）
|
||||||
|
## 概述
|
||||||
|
|
||||||
|
这是一个利用原生view控件绘制底部选项卡的示例，有以下几个特点：
|
||||||
|
1.首页显示第一个tab项内容，其余tab项内容为首页的子窗口，相比创建四个子窗口，显示速度更快，占用内存更少，消耗性能更小。
|
||||||
|
2.操作简单：选项卡常用于App首页，为加快渲染，首页的原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的；
|
||||||
|
3.绘制内容支持字体，图片，矩形区域
|
||||||
|
4.开发者自定义选项卡点击事件
|
||||||
|
5.同样支持页内绘制原生 view 控件，也就是说在非首页也可以使用此方法，参考示例：底部选项卡中央凸起悬浮大图标的绘制
|
||||||
|
|
||||||
|
#### 说明：中央凸起悬浮大图标，因涉及屏幕分辨率动态计算和为给出开发者页内手动绘制的示例的原因，放在首页plusReady事件中实现绘制的。该悬浮大图标支持点击事件，开发者可定制实现对应的点击逻辑。
|
||||||
|
|
||||||
|
## 应用截图
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 快速体验
|
||||||
|
|
||||||
|
[流应用app下载](http://liuyingyong.cn/) --> 扫描下方二维码快速体验
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 使用教程
|
||||||
|
|
||||||
|
[教程参考](http://ask.dcloud.net.cn/article/12602)
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"prompt" : "none"
|
||||||
|
}
|
||||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||||||
|
<title>new webview</title>
|
||||||
|
<script src="../js/mui.min.js"></script>
|
||||||
|
<link href="../css/mui.min.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="mui-bar mui-bar-nav">
|
||||||
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||||||
|
<h1 class="mui-title">新窗口</h1>
|
||||||
|
</header>
|
||||||
|
<div class="mui-content">
|
||||||
|
<p style="margin-top:20px;margin-left: 20px;">这是subNView模式下打开的新窗口。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
mui.init();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Hello MUI</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
<link rel="stylesheet" href="../css/mui.min.css">
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background-color: #efeff4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
padding: 20px 15px 10px;
|
||||||
|
color: #6d6d72;
|
||||||
|
font-size: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
|
||||||
|
<div class="mui-scroll">
|
||||||
|
<div class="title">
|
||||||
|
这是subNView模式选项卡中的第1个子页面，该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表
|
||||||
|
</div>
|
||||||
|
<ul class="mui-table-view mui-table-view-chevron">
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 1</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 2</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 3</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 4</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 5</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 6</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 7</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 8</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 9</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 10</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 11</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 12</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 13</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 14</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 15</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 16</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 17</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 18</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 19</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 20</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="../js/mui.min.js"></script>
|
||||||
|
<script>
|
||||||
|
mui.init({
|
||||||
|
swipeBack: false,
|
||||||
|
pullRefresh: {
|
||||||
|
container: '#pullrefresh',
|
||||||
|
down: {
|
||||||
|
style:'circle',
|
||||||
|
callback: pulldownRefresh
|
||||||
|
},
|
||||||
|
up: {
|
||||||
|
contentrefresh: '正在加载...',
|
||||||
|
callback: pullupRefresh
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
/**
|
||||||
|
* 下拉刷新具体业务实现
|
||||||
|
*/
|
||||||
|
function pulldownRefresh() {
|
||||||
|
setTimeout(function() {
|
||||||
|
var table = document.body.querySelector('.mui-table-view');
|
||||||
|
var cells = document.body.querySelectorAll('.mui-table-view-cell');
|
||||||
|
for(var i = cells.length, len = i + 3; i < len; i++) {
|
||||||
|
var li = document.createElement('li');
|
||||||
|
li.className = 'mui-table-view-cell';
|
||||||
|
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
|
||||||
|
//下拉刷新，新纪录插到最前面；
|
||||||
|
table.insertBefore(li, table.firstChild);
|
||||||
|
}
|
||||||
|
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
|
||||||
|
mui.toast('下拉刷新成功');
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
var count = 0;
|
||||||
|
/**
|
||||||
|
* 上拉加载具体业务实现
|
||||||
|
*/
|
||||||
|
function pullupRefresh() {
|
||||||
|
setTimeout(function() {
|
||||||
|
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
|
||||||
|
var table = document.body.querySelector('.mui-table-view');
|
||||||
|
var cells = document.body.querySelectorAll('.mui-table-view-cell');
|
||||||
|
for(var i = cells.length, len = i + 20; i < len; i++) {
|
||||||
|
var li = document.createElement('li');
|
||||||
|
li.className = 'mui-table-view-cell';
|
||||||
|
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
|
||||||
|
table.appendChild(li);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Hello MUI</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/mui.min.css">
|
||||||
|
<style>
|
||||||
|
html,body {
|
||||||
|
background-color: #efeff4;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 20px 15px 10px;
|
||||||
|
color: #6d6d72;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.oa-contact-cell.mui-table .mui-table-cell {
|
||||||
|
padding: 11px 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oa-contact-cell {
|
||||||
|
position: relative;
|
||||||
|
margin: -11px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oa-contact-avatar {
|
||||||
|
width: 75px;
|
||||||
|
}
|
||||||
|
.oa-contact-avatar img {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.oa-contact-content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.oa-contact-name {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.oa-contact-name, oa-contact-position {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="mui-content">
|
||||||
|
<div class="title">
|
||||||
|
这是subNView模式选项卡中的第2个子页面，该页面展示一个通讯录示例
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<div class="mui-slider-cell">
|
||||||
|
<div class="oa-contact-cell mui-table">
|
||||||
|
<div class="oa-contact-avatar mui-table-cell">
|
||||||
|
<img src="../images/60x60.gif" />
|
||||||
|
</div>
|
||||||
|
<div class="oa-contact-content mui-table-cell">
|
||||||
|
<div class="mui-clearfix">
|
||||||
|
<h4 class="oa-contact-name">叶文洁</h4>
|
||||||
|
<span class="oa-contact-position mui-h6">董事长</span>
|
||||||
|
</div>
|
||||||
|
<p class="oa-contact-email mui-h6">
|
||||||
|
yewenjie@sina.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<div class="mui-slider-cell">
|
||||||
|
<div class="oa-contact-cell mui-table">
|
||||||
|
<div class="oa-contact-avatar mui-table-cell">
|
||||||
|
<img src="../images/60x60.gif" />
|
||||||
|
</div>
|
||||||
|
<div class="oa-contact-content mui-table-cell">
|
||||||
|
<div class="mui-clearfix">
|
||||||
|
<h4 class="oa-contact-name">艾AA</h4>
|
||||||
|
<span class="oa-contact-position mui-h6">总经理</span>
|
||||||
|
</div>
|
||||||
|
<p class="oa-contact-email mui-h6">
|
||||||
|
aaa@163.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<div class="mui-slider-cell">
|
||||||
|
<div class="oa-contact-cell mui-table">
|
||||||
|
<div class="oa-contact-avatar mui-table-cell">
|
||||||
|
<img src="../images/60x60.gif" />
|
||||||
|
</div>
|
||||||
|
<div class="oa-contact-content mui-table-cell">
|
||||||
|
<div class="mui-clearfix">
|
||||||
|
<h4 class="oa-contact-name">罗辑</h4>
|
||||||
|
<span class="oa-contact-position mui-h6">员工</span>
|
||||||
|
</div>
|
||||||
|
<p class="oa-contact-email mui-h6">
|
||||||
|
luoji@126.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<div class="mui-slider-cell">
|
||||||
|
<div class="oa-contact-cell mui-table">
|
||||||
|
<div class="oa-contact-avatar mui-table-cell">
|
||||||
|
<img src="../images/60x60.gif" />
|
||||||
|
</div>
|
||||||
|
<div class="oa-contact-content mui-table-cell">
|
||||||
|
<div class="mui-clearfix">
|
||||||
|
<h4 class="oa-contact-name">云天明</h4>
|
||||||
|
<span class="oa-contact-position mui-h6">员工</span>
|
||||||
|
</div>
|
||||||
|
<p class="oa-contact-email mui-h6">
|
||||||
|
ytm@163.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<div class="mui-slider-cell">
|
||||||
|
<div class="oa-contact-cell mui-table">
|
||||||
|
<div class="oa-contact-avatar mui-table-cell">
|
||||||
|
<img src="../images/60x60.gif" />
|
||||||
|
</div>
|
||||||
|
<div class="oa-contact-content mui-table-cell">
|
||||||
|
<div class="mui-clearfix">
|
||||||
|
<h4 class="oa-contact-name">史强</h4>
|
||||||
|
<span class="oa-contact-position mui-h6">员工</span>
|
||||||
|
</div>
|
||||||
|
<p class="oa-contact-email mui-h6">
|
||||||
|
shiqiang@gmail.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script src="../js/mui.min.js"></script>
|
||||||
|
<script>
|
||||||
|
mui.init({
|
||||||
|
swipeBack:true //启用右滑关闭功能
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 203 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,208 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||||||
|
<title></title>
|
||||||
|
<script src="js/mui.min.js"></script>
|
||||||
|
<link href="css/mui.min.css" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background-color: #efeff4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 20px 15px 10px;
|
||||||
|
color: #6d6d72;
|
||||||
|
font-size: 15px;
|
||||||
|
padding-bottom: 51px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// H5 plus事件处理
|
||||||
|
function plusReady() {
|
||||||
|
// 关闭程序启动界面
|
||||||
|
plus.navigator.closeSplashscreen();
|
||||||
|
}
|
||||||
|
plusReady();
|
||||||
|
// if (window.plus) {
|
||||||
|
// plusReady();
|
||||||
|
// } else {
|
||||||
|
// document.addEventListener('plusready', plusReady, false);
|
||||||
|
// }
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="mui-content">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/util.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
(function() {
|
||||||
|
mui.init({
|
||||||
|
swipeBack: true //启用右滑关闭功能
|
||||||
|
});
|
||||||
|
mui.plusReady(function() {
|
||||||
|
var self = plus.webview.currentWebview(),
|
||||||
|
leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中
|
||||||
|
|
||||||
|
/**
|
||||||
|
* drawNativeIcon 绘制带边框的半圆，
|
||||||
|
* 实现原理：
|
||||||
|
* id为bg的tag 创建带边框的圆
|
||||||
|
* id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
|
||||||
|
* id为iconBg的红色背景图
|
||||||
|
* id为icon的字体图标
|
||||||
|
* 注意创建先后顺序，创建越晚的层级越高
|
||||||
|
*/
|
||||||
|
var drawNativeIcon = util.drawNative('icon', {
|
||||||
|
bottom: '5px',
|
||||||
|
left: leftPos + 'px',
|
||||||
|
width: '60px',
|
||||||
|
height: '60px'
|
||||||
|
}, [{
|
||||||
|
tag: 'rect',
|
||||||
|
id: 'bg',
|
||||||
|
position: {
|
||||||
|
top: '1px',
|
||||||
|
left: '0px',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
},
|
||||||
|
rectStyles: {
|
||||||
|
color: '#fff',
|
||||||
|
radius: '50%',
|
||||||
|
borderColor: '#ccc',
|
||||||
|
borderWidth: '1px'
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
tag: 'rect',
|
||||||
|
id: 'bg2',
|
||||||
|
position: {
|
||||||
|
bottom: '-0.5px',
|
||||||
|
left: '0px',
|
||||||
|
width: '100%',
|
||||||
|
height: '45px'
|
||||||
|
},
|
||||||
|
rectStyles: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
tag: 'rect',
|
||||||
|
id: 'iconBg',
|
||||||
|
position: {
|
||||||
|
top: '5px',
|
||||||
|
left: '5px',
|
||||||
|
width: '50px',
|
||||||
|
height: '50px'
|
||||||
|
},
|
||||||
|
rectStyles: {
|
||||||
|
color: '#d74b28',
|
||||||
|
radius: '50%'
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
tag: 'font',
|
||||||
|
id: 'icon',
|
||||||
|
text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'
|
||||||
|
position: {
|
||||||
|
top: '0px',
|
||||||
|
left: '5px',
|
||||||
|
width: '50px',
|
||||||
|
height: '100%'
|
||||||
|
},
|
||||||
|
textStyles: {
|
||||||
|
fontSrc: '_www/fonts/iconfont.ttf',
|
||||||
|
align: 'center',
|
||||||
|
color: '#fff',
|
||||||
|
size: '30px'
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
// append 到父webview中
|
||||||
|
self.append(drawNativeIcon);
|
||||||
|
|
||||||
|
//自定义监听图标点击事件
|
||||||
|
var active_color = '#fff';
|
||||||
|
drawNativeIcon.addEventListener('click', function(e) {
|
||||||
|
// mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');
|
||||||
|
// 重绘字体颜色
|
||||||
|
if (active_color == '#fff') {
|
||||||
|
drawNativeIcon.drawText('\ue600', {}, {
|
||||||
|
fontSrc: '_www/fonts/iconfont.ttf',
|
||||||
|
align: 'center',
|
||||||
|
color: '#000',
|
||||||
|
size: '30px'
|
||||||
|
}, 'icon');
|
||||||
|
active_color = '#000';
|
||||||
|
} else {
|
||||||
|
drawNativeIcon.drawText('\ue600', {}, {
|
||||||
|
fontSrc: '_www/fonts/iconfont.ttf',
|
||||||
|
align: 'center',
|
||||||
|
color: '#fff',
|
||||||
|
size: '30px'
|
||||||
|
}, 'icon');
|
||||||
|
active_color = '#fff';
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
// 中间凸起图标绘制及监听点击完毕
|
||||||
|
|
||||||
|
// 创建子webview窗口 并初始化
|
||||||
|
var aniShow = {};
|
||||||
|
util.initSubpage(aniShow);
|
||||||
|
|
||||||
|
var nview = plus.nativeObj.View.getViewById('tabBar'),
|
||||||
|
activePage = plus.webview.currentWebview(),
|
||||||
|
targetPage,
|
||||||
|
subpages = util.options.subpages,
|
||||||
|
pageW = window.innerWidth,
|
||||||
|
currIndex = 0;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据判断view控件点击位置判断切换的tab
|
||||||
|
*/
|
||||||
|
nview.addEventListener('click', function(e) {
|
||||||
|
var clientX = e.clientX;
|
||||||
|
if (clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
|
||||||
|
currIndex = 0;
|
||||||
|
} else if (clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
|
||||||
|
currIndex = 1;
|
||||||
|
} else if (clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
|
||||||
|
currIndex = 2;
|
||||||
|
} else {
|
||||||
|
currIndex = 3;
|
||||||
|
}
|
||||||
|
// 匹配对应tab窗口
|
||||||
|
if (currIndex > 0) {
|
||||||
|
targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
|
||||||
|
} else {
|
||||||
|
targetPage = plus.webview.currentWebview();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (targetPage == activePage) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currIndex !== 3) {
|
||||||
|
//底部选项卡切换
|
||||||
|
util.toggleNview(currIndex);
|
||||||
|
// 子页面切换
|
||||||
|
util.changeSubpage(targetPage, activePage, aniShow);
|
||||||
|
//更新当前活跃的页面
|
||||||
|
activePage = targetPage;
|
||||||
|
} else {
|
||||||
|
//第四个tab 打开新窗口
|
||||||
|
plus.webview.open('html/new-webview.html', 'new', {}, 'slide-in-right', 200);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,107 @@
|
||||||
|
var util = {
|
||||||
|
options: {
|
||||||
|
ACTIVE_COLOR: "#007aff",
|
||||||
|
NORMAL_COLOR: "#000",
|
||||||
|
subpages: ["html/tab-webview-subpage-chat.html", "html/tab-webview-subpage-contact.html"]
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 简单封装了绘制原生view控件的方法
|
||||||
|
* 绘制内容支持font（文本，字体图标）,图片img , 矩形区域rect
|
||||||
|
*/
|
||||||
|
drawNative: function(id, styles, tags) {
|
||||||
|
var view = new plus.nativeObj.View(id, styles, tags);
|
||||||
|
return view;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 初始化首个tab窗口 和 创建子webview窗口
|
||||||
|
*/
|
||||||
|
initSubpage: function(aniShow) {
|
||||||
|
var subpage_style = {
|
||||||
|
top: 0,
|
||||||
|
bottom: 51
|
||||||
|
},
|
||||||
|
subpages = util.options.subpages,
|
||||||
|
self = plus.webview.currentWebview(),
|
||||||
|
temp = {};
|
||||||
|
|
||||||
|
//兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容
|
||||||
|
if(mui.os.android) {
|
||||||
|
if(plus.navigator.isImmersedStatusbar()) {
|
||||||
|
subpage_style.top += plus.navigator.getStatusbarHeight();
|
||||||
|
}
|
||||||
|
if(self.getTitleNView()) {
|
||||||
|
subpage_style.top += 40;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化第一个tab项为首次显示
|
||||||
|
temp[self.id] = "true";
|
||||||
|
mui.extend(aniShow, temp);
|
||||||
|
// 初始化绘制首个tab按钮
|
||||||
|
util.toggleNview(0);
|
||||||
|
|
||||||
|
for(var i = 0, len = subpages.length; i < len; i++) {
|
||||||
|
|
||||||
|
if(!plus.webview.getWebviewById(subpages[i])) {
|
||||||
|
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
|
||||||
|
// append到当前父webview
|
||||||
|
self.append(sub);
|
||||||
|
// 初始化隐藏
|
||||||
|
sub.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击切换tab窗口
|
||||||
|
*/
|
||||||
|
changeSubpage: function(targetPage, activePage, aniShow) {
|
||||||
|
//若为iOS平台或非首次显示，则直接显示
|
||||||
|
if(mui.os.ios || aniShow[targetPage]) {
|
||||||
|
plus.webview.show(targetPage);
|
||||||
|
} else {
|
||||||
|
//否则，使用fade-in动画，且保存变量
|
||||||
|
var temp = {};
|
||||||
|
temp[targetPage] = "true";
|
||||||
|
mui.extend(aniShow, temp);
|
||||||
|
plus.webview.show(targetPage, "fade-in", 300);
|
||||||
|
}
|
||||||
|
//隐藏当前 除了第一个父窗口
|
||||||
|
if(activePage !== plus.webview.getLaunchWebview()) {
|
||||||
|
plus.webview.hide(activePage);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击重绘底部tab （view控件）
|
||||||
|
*/
|
||||||
|
toggleNview: function(currIndex) {
|
||||||
|
currIndex = currIndex * 2;
|
||||||
|
// 重绘当前tag 包括icon和text，所以执行两个重绘操作
|
||||||
|
util.updateSubNView(currIndex, util.options.ACTIVE_COLOR);
|
||||||
|
util.updateSubNView(currIndex + 1, util.options.ACTIVE_COLOR);
|
||||||
|
// 重绘兄弟tag 反之排除当前点击的icon和text
|
||||||
|
for(var i = 0; i < 8; i++) {
|
||||||
|
if(i !== currIndex && i !== currIndex + 1) {
|
||||||
|
util.updateSubNView(i, util.options.NORMAL_COLOR);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* 改变颜色
|
||||||
|
*/
|
||||||
|
changeColor: function(obj, color) {
|
||||||
|
obj.color = color;
|
||||||
|
return obj;
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* 利用 plus.nativeObj.View 提供的 drawText 方法更新 view 控件
|
||||||
|
*/
|
||||||
|
updateSubNView: function(currIndex, color) {
|
||||||
|
var self = plus.webview.currentWebview(),
|
||||||
|
nviewEvent = plus.nativeObj.View.getViewById("tabBar"), // 获取nview控件对象
|
||||||
|
nviewObj = self.getStyle().subNViews[0], // 获取nview对象的属性
|
||||||
|
currTag = nviewObj.tags[currIndex]; // 获取当前需重绘的tag
|
||||||
|
|
||||||
|
nviewEvent.drawText(currTag.text, currTag.position, util.changeColor(currTag.textStyles, color), currTag.id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,200 @@
|
||||||
|
{
|
||||||
|
"@platforms" : [ "android", "iPhone", "iPad" ],
|
||||||
|
"id" : "H5F1E04DB",
|
||||||
|
/*应用的标识，创建应用时自动生成，勿手动修改*/
|
||||||
|
"name" : "Qlik",
|
||||||
|
/*应用名称，程序桌面图标名称*/
|
||||||
|
"version" : {
|
||||||
|
"name" : "1.0",
|
||||||
|
/*应用版本名称*/
|
||||||
|
"code" : ""
|
||||||
|
},
|
||||||
|
"description" : "nativeObj模式底部选项卡 + 底部悬浮大球图标 + webview模式子窗口官方示例",
|
||||||
|
/*应用描述信息*/
|
||||||
|
"icons" : {
|
||||||
|
"72" : "icon.png"
|
||||||
|
},
|
||||||
|
"launch_path" : "https://task.qlik-tr.com/#/",
|
||||||
|
/*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/
|
||||||
|
"developer" : {
|
||||||
|
"name" : "",
|
||||||
|
/*开发者名称*/
|
||||||
|
"email" : "",
|
||||||
|
/*开发者邮箱地址*/
|
||||||
|
"url" : ""
|
||||||
|
},
|
||||||
|
"permissions" : {},
|
||||||
|
"plus" : {
|
||||||
|
"launchwebview" : {
|
||||||
|
"bottom" : "0px",
|
||||||
|
"background" : "#fff"
|
||||||
|
},
|
||||||
|
"splashscreen" : {
|
||||||
|
"alwaysShowBeforeRender" : false,
|
||||||
|
"autoclose" : true,
|
||||||
|
/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/
|
||||||
|
"waiting" : true,
|
||||||
|
"delay" : ""
|
||||||
|
},
|
||||||
|
"popGesture" : "close",
|
||||||
|
/*设置应用默认侧滑返回关闭Webview窗口，"none"为无侧滑返回功能，"hide"为侧滑隐藏Webview窗口。参考http://ask.dcloud.net.cn/article/102*/
|
||||||
|
"runmode" : "normal",
|
||||||
|
/*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/
|
||||||
|
"signature" : "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==",
|
||||||
|
/*可选，保留给应用签名，暂不使用*/
|
||||||
|
"distribute" : {
|
||||||
|
"apple" : {
|
||||||
|
"appid" : "",
|
||||||
|
/*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/
|
||||||
|
"mobileprovision" : "",
|
||||||
|
/*iOS应用打包配置文件*/
|
||||||
|
"password" : "",
|
||||||
|
/*iOS应用打包个人证书导入密码*/
|
||||||
|
"p12" : "",
|
||||||
|
/*iOS应用打包个人证书，打包配置文件关联的个人证书*/
|
||||||
|
"devices" : "universal",
|
||||||
|
/*iOS应用支持的设备类型，可取值iphone/ipad/universal*/
|
||||||
|
"frameworks" : [],
|
||||||
|
"idfa" : false
|
||||||
|
},
|
||||||
|
"google" : {
|
||||||
|
"packagename" : "",
|
||||||
|
/*Android应用包名，如io.dcloud.HelloH5*/
|
||||||
|
"keystore" : "",
|
||||||
|
/*Android应用打包使用的密钥库文件*/
|
||||||
|
"password" : "",
|
||||||
|
/*Android应用打包使用密钥库中证书的密码*/
|
||||||
|
"aliasname" : "",
|
||||||
|
/*Android应用打包使用密钥库中证书的别名*/
|
||||||
|
"permissions" : [
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
],
|
||||||
|
"abiFilters" : [ "arm64-v8a", "x86" ]
|
||||||
|
},
|
||||||
|
"orientation" : [ "portrait-primary" ],
|
||||||
|
/*应用支持的方向，portrait-primary：竖屏正方向；portrait-secondary：竖屏反方向；landscape-primary：横屏正方向；landscape-secondary：横屏反方向*/
|
||||||
|
"icons" : {
|
||||||
|
"ios" : {
|
||||||
|
"iphone" : {
|
||||||
|
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||||
|
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||||
|
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||||
|
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||||
|
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||||
|
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||||
|
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||||
|
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||||
|
},
|
||||||
|
"ipad" : {
|
||||||
|
"app" : "unpackage/res/icons/76x76.png",
|
||||||
|
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||||
|
"notification" : "unpackage/res/icons/20x20.png",
|
||||||
|
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||||
|
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||||
|
"settings" : "unpackage/res/icons/29x29.png",
|
||||||
|
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||||
|
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||||
|
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||||
|
},
|
||||||
|
"appstore" : "unpackage/res/icons/1024x1024.png"
|
||||||
|
},
|
||||||
|
"android" : {
|
||||||
|
"hdpi" : "D:/GPT浏览器下载/image.9/res/drawable-hdpi/image.9.png",
|
||||||
|
"xhdpi" : "D:/GPT浏览器下载/image.9/res/drawable-xhdpi/image.9.png",
|
||||||
|
"xxhdpi" : "D:/GPT浏览器下载/image.9/res/drawable-xxhdpi/image.9.png",
|
||||||
|
"xxxhdpi" : "D:/GPT浏览器下载/image.9/res/drawable-xxxhdpi/image.9.png"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splashscreen" : {
|
||||||
|
"ios" : {
|
||||||
|
"iphone" : {},
|
||||||
|
"ipad" : {}
|
||||||
|
},
|
||||||
|
"android" : {
|
||||||
|
"xhdpi" : "D:/downloads/_2025-06-22 151821.png",
|
||||||
|
"xxhdpi" : "D:/downloads/_2025-06-22 151821.png",
|
||||||
|
"hdpi" : "D:/downloads/_2025-06-22 151821.png"
|
||||||
|
},
|
||||||
|
"androidStyle" : "default",
|
||||||
|
"useOriginalMsgbox" : false,
|
||||||
|
"iosStyle" : "common"
|
||||||
|
},
|
||||||
|
"ios" : {
|
||||||
|
"dSYMs" : false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dependencies" : {
|
||||||
|
"pages" : {
|
||||||
|
"index.html" : {
|
||||||
|
"resources" : [
|
||||||
|
"js/mui.min.js",
|
||||||
|
"css/mui.min.css",
|
||||||
|
"html/tab-webview-subpage-about.html",
|
||||||
|
"fonts/mui.ttf",
|
||||||
|
"fonts/iconfont.ttf",
|
||||||
|
"html/tab-webview-subpage-chat.html",
|
||||||
|
"js/util.js"
|
||||||
|
],
|
||||||
|
"refer" : [ "html/tab-webview-subpage-contact.html", "html/new-webview.html" ],
|
||||||
|
"priority" : 0
|
||||||
|
},
|
||||||
|
"launch.html" : {
|
||||||
|
"resources" : [
|
||||||
|
"js/mui.min.js",
|
||||||
|
"css/mui.min.css",
|
||||||
|
"html/tab-webview-subpage-about.html"
|
||||||
|
],
|
||||||
|
"refer" : [
|
||||||
|
"html/tab-webview-subpage-setting.html",
|
||||||
|
"html/tab-webview-subpage-chat.html",
|
||||||
|
"html/tab-webview-subpage-contact.html"
|
||||||
|
],
|
||||||
|
"priority" : 0
|
||||||
|
},
|
||||||
|
"html/tab-webview-subpage-setting.html" : {
|
||||||
|
"resources" : [ "fonts/mui.ttf", "css/mui.min.css", "js/mui.min.js" ],
|
||||||
|
"refer" : [],
|
||||||
|
"priority" : 0
|
||||||
|
},
|
||||||
|
"html/tab-webview-subpage-about.html" : {
|
||||||
|
"resources" : [ "css/mui.min.css", "js/mui.min.js", "js/util.js" ],
|
||||||
|
"refer" : [],
|
||||||
|
"priority" : 0
|
||||||
|
},
|
||||||
|
"html/tab-webview-subpage-chat.html" : {
|
||||||
|
"resources" : [ "fonts/mui.ttf", "js/mui.min.js", "css/mui.min.css" ],
|
||||||
|
"refer" : [],
|
||||||
|
"priority" : 0
|
||||||
|
},
|
||||||
|
"html/tab-webview-subpage-contact.html" : {
|
||||||
|
"resources" : [ "images/60x60.gif", "js/mui.min.js", "css/mui.min.css" ],
|
||||||
|
"refer" : [],
|
||||||
|
"priority" : 0
|
||||||
|
},
|
||||||
|
"html/new-webview.html" : {
|
||||||
|
"resources" : [ "css/mui.min.css", "js/mui.min.js", "fonts/mui.ttf" ],
|
||||||
|
"refer" : [],
|
||||||
|
"priority" : 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"idle" : {
|
||||||
|
"resources" : [ "js/mui.js", "css/mui.css" ]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"screenOrientation" : [ "portrait-primary" ]
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 402 B |
Binary file not shown.
|
After Width: | Height: | Size: 402 B |
Binary file not shown.
|
After Width: | Height: | Size: 402 B |
|
|
@ -0,0 +1,26 @@
|
||||||
|
## tab选项卡示例教程-nativeObj原生模式tab（含底部凸起大图标）
|
||||||
|
## 概述
|
||||||
|
|
||||||
|
这是一个利用原生view控件绘制底部选项卡的示例，有以下几个特点：
|
||||||
|
1.首页显示第一个tab项内容，其余tab项内容为首页的子窗口，相比创建四个子窗口，显示速度更快，占用内存更少，消耗性能更小。
|
||||||
|
2.操作简单：选项卡常用于App首页，为加快渲染，首页的原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的；
|
||||||
|
3.绘制内容支持字体，图片，矩形区域
|
||||||
|
4.开发者自定义选项卡点击事件
|
||||||
|
5.同样支持页内绘制原生 view 控件，也就是说在非首页也可以使用此方法，参考示例：底部选项卡中央凸起悬浮大图标的绘制
|
||||||
|
|
||||||
|
#### 说明：中央凸起悬浮大图标，因涉及屏幕分辨率动态计算和为给出开发者页内手动绘制的示例的原因，放在首页plusReady事件中实现绘制的。该悬浮大图标支持点击事件，开发者可定制实现对应的点击逻辑。
|
||||||
|
|
||||||
|
## 应用截图
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 快速体验
|
||||||
|
|
||||||
|
[流应用app下载](http://liuyingyong.cn/) --> 扫描下方二维码快速体验
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 使用教程
|
||||||
|
|
||||||
|
[教程参考](http://ask.dcloud.net.cn/article/12602)
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"prompt" : "none"
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||||||
|
<title>new webview</title>
|
||||||
|
<script src="../js/mui.min.js"></script>
|
||||||
|
<link href="../css/mui.min.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="mui-bar mui-bar-nav">
|
||||||
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||||||
|
<h1 class="mui-title">新窗口</h1>
|
||||||
|
</header>
|
||||||
|
<div class="mui-content">
|
||||||
|
<p style="margin-top:20px;margin-left: 20px;">这是subNView模式下打开的新窗口。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
mui.init();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Hello MUI</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
<link rel="stylesheet" href="../css/mui.min.css">
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background-color: #efeff4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
padding: 20px 15px 10px;
|
||||||
|
color: #6d6d72;
|
||||||
|
font-size: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
|
||||||
|
<div class="mui-scroll">
|
||||||
|
<div class="title">
|
||||||
|
这是subNView模式选项卡中的第1个子页面，该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表
|
||||||
|
</div>
|
||||||
|
<ul class="mui-table-view mui-table-view-chevron">
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 1</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 2</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 3</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 4</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 5</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 6</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 7</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 8</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 9</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 10</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 11</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 12</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 13</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 14</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 15</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 16</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 17</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 18</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 19</a>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<a href="" class="mui-navigate-right">Item 20</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="../js/mui.min.js"></script>
|
||||||
|
<script>
|
||||||
|
mui.init({
|
||||||
|
swipeBack: false,
|
||||||
|
pullRefresh: {
|
||||||
|
container: '#pullrefresh',
|
||||||
|
down: {
|
||||||
|
style:'circle',
|
||||||
|
callback: pulldownRefresh
|
||||||
|
},
|
||||||
|
up: {
|
||||||
|
contentrefresh: '正在加载...',
|
||||||
|
callback: pullupRefresh
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
/**
|
||||||
|
* 下拉刷新具体业务实现
|
||||||
|
*/
|
||||||
|
function pulldownRefresh() {
|
||||||
|
setTimeout(function() {
|
||||||
|
var table = document.body.querySelector('.mui-table-view');
|
||||||
|
var cells = document.body.querySelectorAll('.mui-table-view-cell');
|
||||||
|
for(var i = cells.length, len = i + 3; i < len; i++) {
|
||||||
|
var li = document.createElement('li');
|
||||||
|
li.className = 'mui-table-view-cell';
|
||||||
|
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
|
||||||
|
//下拉刷新，新纪录插到最前面；
|
||||||
|
table.insertBefore(li, table.firstChild);
|
||||||
|
}
|
||||||
|
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
|
||||||
|
mui.toast('下拉刷新成功');
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
var count = 0;
|
||||||
|
/**
|
||||||
|
* 上拉加载具体业务实现
|
||||||
|
*/
|
||||||
|
function pullupRefresh() {
|
||||||
|
setTimeout(function() {
|
||||||
|
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
|
||||||
|
var table = document.body.querySelector('.mui-table-view');
|
||||||
|
var cells = document.body.querySelectorAll('.mui-table-view-cell');
|
||||||
|
for(var i = cells.length, len = i + 20; i < len; i++) {
|
||||||
|
var li = document.createElement('li');
|
||||||
|
li.className = 'mui-table-view-cell';
|
||||||
|
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
|
||||||
|
table.appendChild(li);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Hello MUI</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/mui.min.css">
|
||||||
|
<style>
|
||||||
|
html,body {
|
||||||
|
background-color: #efeff4;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 20px 15px 10px;
|
||||||
|
color: #6d6d72;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.oa-contact-cell.mui-table .mui-table-cell {
|
||||||
|
padding: 11px 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oa-contact-cell {
|
||||||
|
position: relative;
|
||||||
|
margin: -11px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oa-contact-avatar {
|
||||||
|
width: 75px;
|
||||||
|
}
|
||||||
|
.oa-contact-avatar img {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.oa-contact-content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.oa-contact-name {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.oa-contact-name, oa-contact-position {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="mui-content">
|
||||||
|
<div class="title">
|
||||||
|
这是subNView模式选项卡中的第2个子页面，该页面展示一个通讯录示例
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<div class="mui-slider-cell">
|
||||||
|
<div class="oa-contact-cell mui-table">
|
||||||
|
<div class="oa-contact-avatar mui-table-cell">
|
||||||
|
<img src="../images/60x60.gif" />
|
||||||
|
</div>
|
||||||
|
<div class="oa-contact-content mui-table-cell">
|
||||||
|
<div class="mui-clearfix">
|
||||||
|
<h4 class="oa-contact-name">叶文洁</h4>
|
||||||
|
<span class="oa-contact-position mui-h6">董事长</span>
|
||||||
|
</div>
|
||||||
|
<p class="oa-contact-email mui-h6">
|
||||||
|
yewenjie@sina.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<div class="mui-slider-cell">
|
||||||
|
<div class="oa-contact-cell mui-table">
|
||||||
|
<div class="oa-contact-avatar mui-table-cell">
|
||||||
|
<img src="../images/60x60.gif" />
|
||||||
|
</div>
|
||||||
|
<div class="oa-contact-content mui-table-cell">
|
||||||
|
<div class="mui-clearfix">
|
||||||
|
<h4 class="oa-contact-name">艾AA</h4>
|
||||||
|
<span class="oa-contact-position mui-h6">总经理</span>
|
||||||
|
</div>
|
||||||
|
<p class="oa-contact-email mui-h6">
|
||||||
|
aaa@163.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<div class="mui-slider-cell">
|
||||||
|
<div class="oa-contact-cell mui-table">
|
||||||
|
<div class="oa-contact-avatar mui-table-cell">
|
||||||
|
<img src="../images/60x60.gif" />
|
||||||
|
</div>
|
||||||
|
<div class="oa-contact-content mui-table-cell">
|
||||||
|
<div class="mui-clearfix">
|
||||||
|
<h4 class="oa-contact-name">罗辑</h4>
|
||||||
|
<span class="oa-contact-position mui-h6">员工</span>
|
||||||
|
</div>
|
||||||
|
<p class="oa-contact-email mui-h6">
|
||||||
|
luoji@126.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<div class="mui-slider-cell">
|
||||||
|
<div class="oa-contact-cell mui-table">
|
||||||
|
<div class="oa-contact-avatar mui-table-cell">
|
||||||
|
<img src="../images/60x60.gif" />
|
||||||
|
</div>
|
||||||
|
<div class="oa-contact-content mui-table-cell">
|
||||||
|
<div class="mui-clearfix">
|
||||||
|
<h4 class="oa-contact-name">云天明</h4>
|
||||||
|
<span class="oa-contact-position mui-h6">员工</span>
|
||||||
|
</div>
|
||||||
|
<p class="oa-contact-email mui-h6">
|
||||||
|
ytm@163.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mui-table-view-cell">
|
||||||
|
<div class="mui-slider-cell">
|
||||||
|
<div class="oa-contact-cell mui-table">
|
||||||
|
<div class="oa-contact-avatar mui-table-cell">
|
||||||
|
<img src="../images/60x60.gif" />
|
||||||
|
</div>
|
||||||
|
<div class="oa-contact-content mui-table-cell">
|
||||||
|
<div class="mui-clearfix">
|
||||||
|
<h4 class="oa-contact-name">史强</h4>
|
||||||
|
<span class="oa-contact-position mui-h6">员工</span>
|
||||||
|
</div>
|
||||||
|
<p class="oa-contact-email mui-h6">
|
||||||
|
shiqiang@gmail.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script src="../js/mui.min.js"></script>
|
||||||
|
<script>
|
||||||
|
mui.init({
|
||||||
|
swipeBack:true //启用右滑关闭功能
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 203 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,208 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||||||
|
<title></title>
|
||||||
|
<script src="js/mui.min.js"></script>
|
||||||
|
<link href="css/mui.min.css" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background-color: #efeff4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 20px 15px 10px;
|
||||||
|
color: #6d6d72;
|
||||||
|
font-size: 15px;
|
||||||
|
padding-bottom: 51px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// H5 plus事件处理
|
||||||
|
function plusReady() {
|
||||||
|
// 关闭程序启动界面
|
||||||
|
plus.navigator.closeSplashscreen();
|
||||||
|
}
|
||||||
|
plusReady();
|
||||||
|
// if (window.plus) {
|
||||||
|
// plusReady();
|
||||||
|
// } else {
|
||||||
|
// document.addEventListener('plusready', plusReady, false);
|
||||||
|
// }
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="mui-content">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/util.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
(function() {
|
||||||
|
mui.init({
|
||||||
|
swipeBack: true //启用右滑关闭功能
|
||||||
|
});
|
||||||
|
mui.plusReady(function() {
|
||||||
|
var self = plus.webview.currentWebview(),
|
||||||
|
leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中
|
||||||
|
|
||||||
|
/**
|
||||||
|
* drawNativeIcon 绘制带边框的半圆，
|
||||||
|
* 实现原理：
|
||||||
|
* id为bg的tag 创建带边框的圆
|
||||||
|
* id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
|
||||||
|
* id为iconBg的红色背景图
|
||||||
|
* id为icon的字体图标
|
||||||
|
* 注意创建先后顺序，创建越晚的层级越高
|
||||||
|
*/
|
||||||
|
var drawNativeIcon = util.drawNative('icon', {
|
||||||
|
bottom: '5px',
|
||||||
|
left: leftPos + 'px',
|
||||||
|
width: '60px',
|
||||||
|
height: '60px'
|
||||||
|
}, [{
|
||||||
|
tag: 'rect',
|
||||||
|
id: 'bg',
|
||||||
|
position: {
|
||||||
|
top: '1px',
|
||||||
|
left: '0px',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
},
|
||||||
|
rectStyles: {
|
||||||
|
color: '#fff',
|
||||||
|
radius: '50%',
|
||||||
|
borderColor: '#ccc',
|
||||||
|
borderWidth: '1px'
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
tag: 'rect',
|
||||||
|
id: 'bg2',
|
||||||
|
position: {
|
||||||
|
bottom: '-0.5px',
|
||||||
|
left: '0px',
|
||||||
|
width: '100%',
|
||||||
|
height: '45px'
|
||||||
|
},
|
||||||
|
rectStyles: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
tag: 'rect',
|
||||||
|
id: 'iconBg',
|
||||||
|
position: {
|
||||||
|
top: '5px',
|
||||||
|
left: '5px',
|
||||||
|
width: '50px',
|
||||||
|
height: '50px'
|
||||||
|
},
|
||||||
|
rectStyles: {
|
||||||
|
color: '#d74b28',
|
||||||
|
radius: '50%'
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
tag: 'font',
|
||||||
|
id: 'icon',
|
||||||
|
text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'
|
||||||
|
position: {
|
||||||
|
top: '0px',
|
||||||
|
left: '5px',
|
||||||
|
width: '50px',
|
||||||
|
height: '100%'
|
||||||
|
},
|
||||||
|
textStyles: {
|
||||||
|
fontSrc: '_www/fonts/iconfont.ttf',
|
||||||
|
align: 'center',
|
||||||
|
color: '#fff',
|
||||||
|
size: '30px'
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
// append 到父webview中
|
||||||
|
self.append(drawNativeIcon);
|
||||||
|
|
||||||
|
//自定义监听图标点击事件
|
||||||
|
var active_color = '#fff';
|
||||||
|
drawNativeIcon.addEventListener('click', function(e) {
|
||||||
|
// mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');
|
||||||
|
// 重绘字体颜色
|
||||||
|
if (active_color == '#fff') {
|
||||||
|
drawNativeIcon.drawText('\ue600', {}, {
|
||||||
|
fontSrc: '_www/fonts/iconfont.ttf',
|
||||||
|
align: 'center',
|
||||||
|
color: '#000',
|
||||||
|
size: '30px'
|
||||||
|
}, 'icon');
|
||||||
|
active_color = '#000';
|
||||||
|
} else {
|
||||||
|
drawNativeIcon.drawText('\ue600', {}, {
|
||||||
|
fontSrc: '_www/fonts/iconfont.ttf',
|
||||||
|
align: 'center',
|
||||||
|
color: '#fff',
|
||||||
|
size: '30px'
|
||||||
|
}, 'icon');
|
||||||
|
active_color = '#fff';
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
// 中间凸起图标绘制及监听点击完毕
|
||||||
|
|
||||||
|
// 创建子webview窗口 并初始化
|
||||||
|
var aniShow = {};
|
||||||
|
util.initSubpage(aniShow);
|
||||||
|
|
||||||
|
var nview = plus.nativeObj.View.getViewById('tabBar'),
|
||||||
|
activePage = plus.webview.currentWebview(),
|
||||||
|
targetPage,
|
||||||
|
subpages = util.options.subpages,
|
||||||
|
pageW = window.innerWidth,
|
||||||
|
currIndex = 0;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据判断view控件点击位置判断切换的tab
|
||||||
|
*/
|
||||||
|
nview.addEventListener('click', function(e) {
|
||||||
|
var clientX = e.clientX;
|
||||||
|
if (clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
|
||||||
|
currIndex = 0;
|
||||||
|
} else if (clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
|
||||||
|
currIndex = 1;
|
||||||
|
} else if (clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
|
||||||
|
currIndex = 2;
|
||||||
|
} else {
|
||||||
|
currIndex = 3;
|
||||||
|
}
|
||||||
|
// 匹配对应tab窗口
|
||||||
|
if (currIndex > 0) {
|
||||||
|
targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
|
||||||
|
} else {
|
||||||
|
targetPage = plus.webview.currentWebview();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (targetPage == activePage) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currIndex !== 3) {
|
||||||
|
//底部选项卡切换
|
||||||
|
util.toggleNview(currIndex);
|
||||||
|
// 子页面切换
|
||||||
|
util.changeSubpage(targetPage, activePage, aniShow);
|
||||||
|
//更新当前活跃的页面
|
||||||
|
activePage = targetPage;
|
||||||
|
} else {
|
||||||
|
//第四个tab 打开新窗口
|
||||||
|
plus.webview.open('html/new-webview.html', 'new', {}, 'slide-in-right', 200);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,107 @@
|
||||||
|
var util = {
|
||||||
|
options: {
|
||||||
|
ACTIVE_COLOR: "#007aff",
|
||||||
|
NORMAL_COLOR: "#000",
|
||||||
|
subpages: ["html/tab-webview-subpage-chat.html", "html/tab-webview-subpage-contact.html"]
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 简单封装了绘制原生view控件的方法
|
||||||
|
* 绘制内容支持font（文本，字体图标）,图片img , 矩形区域rect
|
||||||
|
*/
|
||||||
|
drawNative: function(id, styles, tags) {
|
||||||
|
var view = new plus.nativeObj.View(id, styles, tags);
|
||||||
|
return view;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 初始化首个tab窗口 和 创建子webview窗口
|
||||||
|
*/
|
||||||
|
initSubpage: function(aniShow) {
|
||||||
|
var subpage_style = {
|
||||||
|
top: 0,
|
||||||
|
bottom: 51
|
||||||
|
},
|
||||||
|
subpages = util.options.subpages,
|
||||||
|
self = plus.webview.currentWebview(),
|
||||||
|
temp = {};
|
||||||
|
|
||||||
|
//兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容
|
||||||
|
if(mui.os.android) {
|
||||||
|
if(plus.navigator.isImmersedStatusbar()) {
|
||||||
|
subpage_style.top += plus.navigator.getStatusbarHeight();
|
||||||
|
}
|
||||||
|
if(self.getTitleNView()) {
|
||||||
|
subpage_style.top += 40;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化第一个tab项为首次显示
|
||||||
|
temp[self.id] = "true";
|
||||||
|
mui.extend(aniShow, temp);
|
||||||
|
// 初始化绘制首个tab按钮
|
||||||
|
util.toggleNview(0);
|
||||||
|
|
||||||
|
for(var i = 0, len = subpages.length; i < len; i++) {
|
||||||
|
|
||||||
|
if(!plus.webview.getWebviewById(subpages[i])) {
|
||||||
|
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
|
||||||
|
// append到当前父webview
|
||||||
|
self.append(sub);
|
||||||
|
// 初始化隐藏
|
||||||
|
sub.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击切换tab窗口
|
||||||
|
*/
|
||||||
|
changeSubpage: function(targetPage, activePage, aniShow) {
|
||||||
|
//若为iOS平台或非首次显示，则直接显示
|
||||||
|
if(mui.os.ios || aniShow[targetPage]) {
|
||||||
|
plus.webview.show(targetPage);
|
||||||
|
} else {
|
||||||
|
//否则，使用fade-in动画，且保存变量
|
||||||
|
var temp = {};
|
||||||
|
temp[targetPage] = "true";
|
||||||
|
mui.extend(aniShow, temp);
|
||||||
|
plus.webview.show(targetPage, "fade-in", 300);
|
||||||
|
}
|
||||||
|
//隐藏当前 除了第一个父窗口
|
||||||
|
if(activePage !== plus.webview.getLaunchWebview()) {
|
||||||
|
plus.webview.hide(activePage);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击重绘底部tab （view控件）
|
||||||
|
*/
|
||||||
|
toggleNview: function(currIndex) {
|
||||||
|
currIndex = currIndex * 2;
|
||||||
|
// 重绘当前tag 包括icon和text，所以执行两个重绘操作
|
||||||
|
util.updateSubNView(currIndex, util.options.ACTIVE_COLOR);
|
||||||
|
util.updateSubNView(currIndex + 1, util.options.ACTIVE_COLOR);
|
||||||
|
// 重绘兄弟tag 反之排除当前点击的icon和text
|
||||||
|
for(var i = 0; i < 8; i++) {
|
||||||
|
if(i !== currIndex && i !== currIndex + 1) {
|
||||||
|
util.updateSubNView(i, util.options.NORMAL_COLOR);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* 改变颜色
|
||||||
|
*/
|
||||||
|
changeColor: function(obj, color) {
|
||||||
|
obj.color = color;
|
||||||
|
return obj;
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* 利用 plus.nativeObj.View 提供的 drawText 方法更新 view 控件
|
||||||
|
*/
|
||||||
|
updateSubNView: function(currIndex, color) {
|
||||||
|
var self = plus.webview.currentWebview(),
|
||||||
|
nviewEvent = plus.nativeObj.View.getViewById("tabBar"), // 获取nview控件对象
|
||||||
|
nviewObj = self.getStyle().subNViews[0], // 获取nview对象的属性
|
||||||
|
currTag = nviewObj.tags[currIndex]; // 获取当前需重绘的tag
|
||||||
|
|
||||||
|
nviewEvent.drawText(currTag.text, currTag.position, util.changeColor(currTag.textStyles, color), currTag.id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
{"@platforms":["android","iPhone","iPad"],"id":"H5F1E04DB","name":"Qlik","version":{"name":"1.0","code":""},"description":"nativeObj模式底部选项卡 + 底部悬浮大球图标 + webview模式子窗口官方示例","icons":{"72":"icon.png"},"launch_path":"https://task.qlik-tr.com/#/","developer":{"name":"","email":"","url":""},"permissions":{},"plus":{"launchwebview":{"bottom":"0px","background":"#fff"},"splashscreen":{"alwaysShowBeforeRender":false,"autoclose":true,"delay":"","waiting":true},"popGesture":"close","runmode":"normal","signature":"Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==","distribute":{"apple":{"appid":"","devices":"universal","frameworks":[],"idfa":false,"mobileprovision":"","p12":"","password":"","plistcmds":["Add :UIFileSharingEnabled bool true"]},"google":{"abiFilters":["arm64-v8a","x86"],"aliasname":"testalias","keystore":"google-keystore.keystore","packagename":"plus.Qlik","password":"/GhllXBN3lqcKKiNwCXGtQ==","permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"],"custompermissions":true},"orientation":["portrait-primary"],"icons":{"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"},"prerendered":"false"},"android":{"hdpi":"icon-android-hdpi.png","xhdpi":"icon-android-xhdpi.png","xxhdpi":"icon-android-xxhdpi.png","xxxhdpi":"icon-android-xxxhdpi.png"}},"splashscreen":{"ios":{"iphone":{},"ipad":{}},"android":{"xhdpi":"splash-android-xhdpi.png","xxhdpi":"splash-android-xxhdpi.png","hdpi":"splash-android-hdpi.png"},"androidStyle":"default","useOriginalMsgbox":false,"iosStyle":"common"},"ios":{"dSYMs":false},"debug":true,"syncDebug":true},"adid":"125514200406"},"dependencies":{"pages":{"index.html":{"resources":["js/mui.min.js","css/mui.min.css","html/tab-webview-subpage-about.html","fonts/mui.ttf","fonts/iconfont.ttf","html/tab-webview-subpage-chat.html","js/util.js"],"refer":["html/tab-webview-subpage-contact.html","html/new-webview.html"],"priority":0},"launch.html":{"resources":["js/mui.min.js","css/mui.min.css","html/tab-webview-subpage-about.html"],"refer":["html/tab-webview-subpage-setting.html","html/tab-webview-subpage-chat.html","html/tab-webview-subpage-contact.html"],"priority":0},"html/tab-webview-subpage-setting.html":{"resources":["fonts/mui.ttf","css/mui.min.css","js/mui.min.js"],"refer":[],"priority":0},"html/tab-webview-subpage-about.html":{"resources":["css/mui.min.css","js/mui.min.js","js/util.js"],"refer":[],"priority":0},"html/tab-webview-subpage-chat.html":{"resources":["fonts/mui.ttf","js/mui.min.js","css/mui.min.css"],"refer":[],"priority":0},"html/tab-webview-subpage-contact.html":{"resources":["images/60x60.gif","js/mui.min.js","css/mui.min.css"],"refer":[],"priority":0},"html/new-webview.html":{"resources":["css/mui.min.css","js/mui.min.js","fonts/mui.ttf"],"refer":[],"priority":0}},"idle":{"resources":["js/mui.js","css/mui.css"]}},"screenOrientation":["portrait-primary"]}
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 669 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Loading…
Reference in New Issue