Skip to content

Commit

Permalink
Merge pull request dcloudio#9 from nearwmy/master
Browse files Browse the repository at this point in the history
更新nativetab
  • Loading branch information
hbcui1984 authored Sep 8, 2017
2 parents bdfa9ac + 1ec9287 commit df684ca
Show file tree
Hide file tree
Showing 8 changed files with 230 additions and 211 deletions.
15 changes: 6 additions & 9 deletions nativetab/README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
## nativeObj 模式底部选项卡 + webview 子窗口 实现示例
## tab选项卡示例教程-nativeObj原生模式tab(含底部凸起大图标)
## 概述

这是一个利用原生view控件绘制底部选项卡的示例,有以下几个特点:

1.操作简单:选项卡常用于App首页,为加快渲染,首页的原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的;

2.绘制内容支持字体,图片,矩形区域

3.开发者自定义选项卡点击事件

4.同样支持页内手动绘制 view 控件,也就是说在非首页也可以使用此方法,参考示例:底部选项卡中央凸起悬浮大图标的绘制
1.首页显示第一个tab项内容,其余tab项内容为首页的子窗口,相比创建四个子窗口,显示速度更快,占用内存更少,消耗性能更小。
2.操作简单:选项卡常用于App首页,为加快渲染,首页的原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的;
3.绘制内容支持字体,图片,矩形区域
4.开发者自定义选项卡点击事件
5.同样支持页内手动绘制 view 控件,也就是说在非首页也可以使用此方法,参考示例:底部选项卡中央凸起悬浮大图标的绘制

#### 说明:中央凸起悬浮大图标,因涉及屏幕分辨率动态计算和为给出开发者页内手动绘制的示例的原因,放在首页plusReady事件中实现绘制的。该悬浮大图标支持点击事件,开发者可定制实现对应的点击逻辑。

Expand Down
47 changes: 0 additions & 47 deletions nativetab/html/tab-webview-subpage-about.html

This file was deleted.

2 changes: 1 addition & 1 deletion nativetab/html/tab-webview-subpage-chat.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">
这是subNView模式选项卡中的第2个子页面,该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表
这是subNView模式选项卡中的第1个子页面,该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表
</div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
Expand Down
2 changes: 1 addition & 1 deletion nativetab/html/tab-webview-subpage-contact.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
<body>
<div class="mui-content">
<div class="title">
这是subNView模式选项卡中的第3个子页面,该页面展示一个通讯录示例
这是subNView模式选项卡中的第2个子页面,该页面展示一个通讯录示例
</div>

<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
Expand Down
Loading

0 comments on commit df684ca

Please sign in to comment.