nearwmy@gmail.com
nearwmy@gmail.com
  • 发布:2017-06-23 17:03
  • 更新:6 天前
  • 阅读:73673

tab选项卡示例教程-基于subnview模式的原生tab(含底部凸起大图标)

分类:HTML5+

方案比较说明

关于tab bar选项卡,目前已经有多种实现方案,最常见的有div方案的和双webview方案的。

div方案
div方案的选项卡是普通的实现方案,所有都放在一个页面中执行,页面压力可想而知,在手机上会出现卡顿现象。SPA仅适用于非常简单的dom和非常少的页面;

双webview方案
双webview方案的实现思路就是一个包含tab bar 的父webview + n个对应tab的子webview。在5+App的manifest可以配置双Webview首页,可以让tab父页和第一个子tab的子页同时启动。
但Webview的渲染速度不如nview快,Webview太多对内存吃的太多,崩溃和白屏的概率就会增加。此模式也不是最优。
而下面我们介绍的这种方案,让显示速度,占用内存,性能消耗都达到了一种更优的状态!

基于subnview的原生tab选项卡方案
HBuilder8.8起提供了subnview,subnview顾名思义就是子原生view,也就是把一个全屏Webview的一部分区域切出来,渲染工作交给原生引擎渲染,不走Webview渲染。
此方案设计思路简单来说就是把首页的底部区域变成subnview,交给5+的原生引擎渲染,也就是说是要nview来绘制底部tab。
manifest里配置的首页作为第一个tab选项卡窗口,同时为这个Webview配置subnview,在这个subnview里编写nview的描述,就可以创建一个原生的选项卡,这个选项卡的绘制由5+引擎原生完成,在首页Webview渲染之前就由原生层渲染好了。
其余tab项子窗口在首页plus ready后创建,并同时监听tab点击。
原生view控件制作的tab,还可以轻松实现tab中部凸起大图标的效果,这种效果在双Webview模式下不好实现。

可见基于subnview的原生tab选项卡方案渲染更快、内存更少,并且自定义效果也更丰富。
当然也有一些缺点就是有点复杂,对于学习纯HTML5的程序员而言,首先需要学习subnview这些HTML5+独有的技术。
但nview真的是非常值得学习的技术,掌握nview后,你做出来的App体验绝对和原生一样好。

最新方案优化说明

经过一段时间的实践,发现原生tab选项卡方案存在部分问题,已修复如下问题:

  1. 添加输入框并点击之后webview窗口发生变化,出现白条
  2. 添加titleNView会造成某些tab点击失效
  3. 添加titleNView安卓上会出现遮盖子webview的现象
  4. 设置应用为沉浸式,安卓上中间图标会有下移现象

另外上文提到过webview太多对内存会吃太多,nview创建太多同样存在内存吃紧的问题,原来的方案中为了层次分明和便于监听点击事件总共创建了有6个nview,这与本示例的初衷相悖,所以现在缩减为两个nview。分别是:1.中间凸起图标nview 2.底部选项卡nview。

下面来详细说明此方案(最新方案)的实现方法。

示例效果说明

本示例实现的效果是 使用nativeObj绘制原生view控件类型的底部选项卡 + 底部中央悬浮球图标 + webview模式的选项卡窗口,适用于5+app 和流应用环境,通常应用于app 首页;

效果图展示

实现步骤

1.配置底部选项卡

应用首页配置底部选项卡可以直接在manifest.json 中找到 plus 节点,在里面创建如下示例:
以下给出一个tab的示例,完整示例请下载附件中demo查看。

"launchwebview": {   //首页webview窗口  
    "bottom": "0px",  
    "background": "#fff",  
    "subNViews": [  //subNViews节点下配置你的tab (此处只给出一个tab配置示例)  
            {  
                "id": "tabBar",  
                "styles": {  
                    "bottom": "0px",  
                    "left": "0",  
                    "height": "50px",  
                    "width": "100%",  
                    "backgroundColor": "#fff"  
                },  
                "tags": [  
                    {  
                        "tag": "font",  
                        "id": "indexIcon",  
                        "text": "\ue500",  
                        "position": {  
                            "top": "4px",  
                            "left": "0",  
                            "width": "25%",  
                            "height": "24px"  
                        },  
                        "textStyles": {  
                            "fontSrc": "_www/fonts/mui.ttf",  
                            "align": "center",  
                            "size": "24px"  
                        }  
                    }, {  
                        "tag": "font",  
                        "id": "indexText",  
                        "text": "首页",  
                        "position": {  
                            "top": "23px",  
                            "left": "0",  
                            "width": "25%",  
                            "height": "24px"  
                        },  
                        "textStyles": {  
                            "align": "center",  
                            "size": "10px"  
                        }  
                    }  
            ]  
        }  
    ]  
}  

注意:
1.此处配置tab建议直接配置n个tab 对应n个tag而不是nview控件,尽量少的为webview添加nview控件,nview控件在提供原生渲染能力的同时也会消耗内存。
2.配置需要自己计算图标和文字的显示位置,以上只给出一个示例,具体详情方法可参考附件文件或者HTML5+ API 窗口原生子View控件样式WebviewSubNViewStyles

2.定义tab窗口

将入口页也就是首页作为第一个tab窗口页面,这样做就只需创建3个子webview,相比把tab窗口都作为子webview,占用内存更少,消耗性能也优化更多,而且创建子webview需要等待plusReady事件触发执行,在一些低端机上,子窗口出现会有明显延迟,所以很明显,相比之下直接将首页作为第一个tab窗口页面的方法更优!

首页显示了,接下来是在首页plusReady事件中创建其余tab选项卡对应的窗口,通过webviewObj.append()方法,添加为当前 webview 的 子 webview,方式类似 Hello MUI 实例中 tab bar选项卡 -> 底部选项卡-webview模式

var self = plus.webview.currentWebview();  
// 初始化首页tab窗口为首次显示  
var temp = {};  
temp[self.id] = "true";  
mui.extend(aniShow, temp);  

// 初始化首个tab 按钮,(此方法为自定义方法,详情见上传的附件中)  
toggleNview(self.getStyle().subNViews[0], 0);  

// 初始化其余tab窗口  
for(var i = 0, len = subpages.length; i < len; i++) {  
if(!plus.webview.getWebviewById(subpages[i])) {  
       // 创建子webview  
    var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
    // 隐藏子窗口  
        sub.hide();     

    // 添加为当前webview 的子 webview ------此步骤很重要  
    self.append(sub);  
    }  
}  

3.底部选项卡添加事件监听

目前底部已经生成四个选项卡,鉴于最新方案已更改为以subnview中创建tag的方式生成选项卡的原因,实现方法为在view控件上添加点击事件监听,然后通过判断点击位置实现tab切换。
部分代码如下:

/**  
 * 根据判断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);  
    }  
});  

说明:点击事件中包含tab选项卡以及tab窗口切换,详情见附件

到这里其实绘制底部选项卡和webview模式的子页面,并且给选项卡添加了监听事件,已经初步完成。
但是小伙伴们还想在这样的模式下给底部中央一个凸起的悬浮大图标,可以怎么做呢,其实原理是一样的,也可以在manifest.json中配置,但是考虑到水平中央的图标涉及屏幕分辨率动态计算目前放在首页plusReady事件中配置,也给开发者一种可以手动绘制view控件的方法,如果你想在非首页采用这种方法呢。

4.利用nativeObj绘制凸起图标参考 HTML 5+ API plus.nativeObj.View
实现步骤如下:
1.首页plusReady事件中创建实例对象,最新方案中将背景nview和图标nview整合到了一起。
示例如下:

// 设置水平居中位置  
var leftPos = Math.ceil((window.innerWidth - 60) / 2);  

/**  
 * 简单封装了绘制原生view控件方法 drawNative()  
 * 绘制内容支持font(文本,字体图标),图片img , 矩形区域rect  
 *  
 */  
function drawNative(id, styles, tags) {  
    var view = new plus.nativeObj.View(id, styles, tags);  
    return view  
}  

/**   
 * 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'  
    }  
}]);  
// 添加到当前父webview中,------此步骤很重要  
self.append(drawNativeIcon);  

2.view控件添加监听事件

//自定义监听图标点击事件  
drawNativeIcon.addEventListener('click', function(e) {  
    mui.alert('你点击了图标,你在此可以打开摄像头或者新窗口等自定义点击事件。','悬浮球点击事件');  
});  

原生view控件使用说明

  1. 以上描述创建并绘制原生view控件有两种方法:
    a.如果是首页应用,可以在manifest.json文件中相应节点配置,渲染快,配置方法简单
    b.通过new plus.nativeObj.View(),创建View实例对象,然后将该实例对象append到当前窗口(plus.webview.currentWebview)
  2. 这两种方法都需要开发者在首页plusReady事件中去针对view控件添加监听事件,比如切换对应窗口这种。
  3. view控件支持绘制类型:图片、矩形区域、文本(包括字体图标)
  4. 字体图标比如该悬浮球字体,来自iconfont.cn 阿里巴巴字体库,字体一般为Unicode(16进制)码:'\e600',但是配置的时候,需要填写为"\ue600"才能被原生层正确解析
  5. 参考 HTML 5+ API plus.nativeObj.View

该示例补充说明

  1. 中央悬浮大图标都是通过字体加纯色背景实现
  2. 其背后带边线半球区域也是通过两个矩形区域的view控件叠加拼成的,具体实现方法可以在附件中查看
  3. 本示例字体文件分别采用mui字体文件和阿里巴巴字体库
  4. 第四个选项卡点击打开新窗口,为示例教程,开发者可自行定义
  5. 屏幕旋转后,需手动重绘nview,参考nview的api。虽复杂也可以实现。也可以在manifest里禁用掉旋转。

扩展链接

字体图标绘制原生view控件
如何更新通过nativeObj.View创建的view控件教程

下载附件中的文件,直接解压真机运行即可体验

59 关注 分享
DCloud_heavensoft 赵梦欢 467732207@qq.com 5个萝卜 Neil_HL webliuzhiqi@163.com ahua 962529758@qq.com 幽壑潜蛟 492113976@qq.com chengbo_0717@126.com 邓荣勇 lufei 妙妙 sonpu 534123074@qq.com 逐鹿实验室 可苦可乐 独木为夕 洛上千栀 526466900@qq.com 阿拉斌 1245571809@qq.com 813026685@qq.com 小哥哥 492886274@qq.com hylong 77528395@qq.com xswordcn@163.com 1007768971@qq.com 21221197@qq.com 1335185862@qq.com nativelearning 420652869@qq.com dlamliu@qq.com 810726685@qq.com 562619057@qq.com yxdemail123@163.com 1757823432@qq.com 773918248@qq.com 656599505@qq.com xyt925@163.com 小小刀 joygezxp@126.com gzg 李虎 wlzygxw uni_wu 13641086197@163.com SimpleJalon

要回复文章请先登录注册

luoccz@163.com

luoccz@163.com

谢谢指点
6 天前
1120336291@qq.com

1120336291@qq.com

回复 phoenix:
我也出现了同样的问题,请问你解决了么
2019-06-18 10:09
1213731560@qq.com

1213731560@qq.com

ios12 运行该 demo 开启沉浸式并且设置 titleNView;
问题1: titleNView 会把子窗口遮住,这个问题通过修改 util.js 中判断只有安卓才做兼容删除解决
问题2:子窗口遮挡中间的凸出图标了,安卓不会,修改子窗口和凸出图标的 append 顺序没有得到解决
2019-05-07 18:26
人生多歧路

人生多歧路

软键盘撑起这个感觉只能先用隐藏实现了
2019-04-22 14:24
人生多歧路

人生多歧路

被软键盘撑起怎么处理呢?
2019-04-19 16:35
IT界骨灰级玩家

IT界骨灰级玩家

不错不错
2019-04-15 12:12
辉辉同学

辉辉同学

当前demo,连接到模拟器上首次打开app点击到“通讯录”时会有横向导航条闪一下,不知什么原因照成的
2019-04-15 11:31
辉辉同学

辉辉同学

虽说这种原生的方式推荐,好像实际中常用的还是双webview的方式吧?
2019-04-13 11:24
lanael@live.com

lanael@live.com

回复 lanael@live.com:
已解决,记录一下,直接调用 plus.webview.getLaunchWebview().show(); 即可。之前自己折腾好久,用setStyle({subNView:[...]})改写Util.js啥的,都不行。
2019-04-10 11:56
lanael@live.com

lanael@live.com

回复 Denty:
我也有同样的问题。您解决了吗?
2019-04-10 10:43
897034138@qq.com

897034138@qq.com

回复 1525941857@qq.com:
我也有这个问题 有没有大神帮忙解决一下啊?
2019-03-30 20:08
liu_yuchong@163.com

liu_yuchong@163.com

回复 人生多歧路:
你解决了没有,这个问题困扰我很久了
2019-03-18 14:45
phoenix

phoenix

我运行了例子,只要想把底部的五个选项卡变成4个或者3个,反正只要随便删除掉一个,就会出现Cannot set property 'color' of undefined,然后真机运行的时候能看到效果,就是点击不了了。
2019-03-16 18:03
liu_yuchong@163.com

liu_yuchong@163.com

帅哥,这种原生底部选项卡当子页面有input聚焦时会被软键盘顶起来,怎么破?
2019-03-15 09:35
人生多歧路

人生多歧路

回复 人生多歧路:
已实现:newsNumIcon.drawText(数值,position,textStyles,id);更改消息数量
2019-03-08 15:11
人生多歧路

人生多歧路

关于底部消息角标,可以用画底部凸起圆的方法,重新创建绘制一个角标var newsNumIcon = util.drawNative('icon', 角标位置,角标样式);只是不太清楚角标内数值如何变化,是使用drawText吗?
2019-03-08 14:39
452966517@qq.com

452966517@qq.com

回复 汢鳖:
抱歉,才看到。
底部切换应该说不算是预加载吧,是“加载完成后隐藏”,都是作为主页的子页面,详情你可以看该博客的标题2:定义tab窗口,我照着这个用没什么问题。
你说白屏问题的话,建议参考下看看:http://ask.dcloud.net.cn/article/25
2019-03-05 19:47
1525941857@qq.com

1525941857@qq.com

从别的页面跳转过来 底部选项卡都不见了,只剩中间凸起的按钮,请问有什么解决办法吗?
2019-03-05 11:35
kekezaixian@qq.com

kekezaixian@qq.com

这个示例我通过hbuilderX真机运行在iPhone8plus,底部tab不能切换,样式也没有渲染出来,请问是不是不兼容
2019-02-28 16:12
人生多歧路

人生多歧路

首页我有个导航搜索栏,点击弹出软键盘时底部被撑起,请问一下这种情况有什么好点的办法呢?
2019-02-19 11:10
Denty

Denty

打开其他页面跳转回主页后底部选项卡都不见了,有什么解决方法吗?返回是可以,现在需要是跳转!
2019-02-14 16:44
Hb传道者

Hb传道者

回复 Ddz:
我也遇到这个问题,解决了吗
2019-01-28 13:25
269482756@qq.com

269482756@qq.com

回复 zhangyu196:
同问……
2019-01-24 15:20
zhangyu196

zhangyu196

回复 Ddz:
解决了吗
2019-01-04 08:39
PHP全栈

PHP全栈

不同宽度的手机实际显示的大小差异过大怎么破?例如那个导航高度,有的手机显示很“矮”,有的却很“高”! 如果是写在普通的页面内,可以使用判断屏幕宽度改变根元素的font-size进而使用rem;但是这里的 manifest.json 文件只能使用 px!!怎么破???
2018-12-30 15:08
汢鳖

汢鳖

回复 452966517@qq.com:
你底部栏切换是 预加载的html文件吗 切换tab打开页面会白屏会 然后页面慢慢加载出来这个怎么解决
2018-12-25 17:02
452966517@qq.com

452966517@qq.com

回复 汢鳖:
你说的是openwindow吧,打开tab以外的其他页面用这个是没错了。
弹出软键盘这个问题,我还真没遇到过,你指的问题具体是“tab页→A页→B页”,然后B页打开input会在A页弹出吗?那你是怎么看到的?很奇怪,没遇到过。
建议你看一下使用接口弹出键盘的这个例子http://ask.dcloud.net.cn/question/2324。
2018-12-25 08:59
汢鳖

汢鳖

回复 452966517@qq.com:
我想质询你一个问题 我现在是4个tab页面 然后打开其他页面读是mui openview 现在有个问题 就是点Input 弹出软键盘的时候 他会显示前面 就是上一层的页面。。 不知道怎么解决
2018-12-22 01:00
452966517@qq.com

452966517@qq.com

回复 汢鳖:
解决了,好像在这个模版下直接调用下拉会有点问题,我在下方plus加载完成后用其他放出处理了下拉。
function plusReady() {
ws = plus.webview.currentWebview();
ws.setPullToRefresh({
support: true,
height: '50px',
range: '200px',
contentdown: {
caption: '下拉可以刷新'
},
contentover: {
caption: '释放立即刷新'
},
contentrefresh: {
caption: '正在刷新...'
}
}, pulldownRefresh);
pulldownRefresh();//先调用一次,使后续刷新操作可以正常进行
plus.nativeUI.toast('下拉可以刷新');
}
2018-12-21 10:35
汢鳖

汢鳖

回复 452966517@qq.com:
请问你那个问题解决了吗 我现在也遇见那个问题了
2018-12-11 11:50
weilizero@163.com

weilizero@163.com

回复 KitJack:
同求解答,不知道你解决了没有啊?
2018-11-26 11:36
Ddz

Ddz

更新新版本后,ios上凸起图标的凸起部分会被其他页面遮盖, android没有问题,不知道怎么解决?
2018-11-26 10:01
1359378025@qq.com

1359378025@qq.com

回复 落日逢佳雨:
请问您的问题解决了吗?我也遇到相同的问题
2018-11-22 16:24
877643886@qq.com

877643886@qq.com

2018-11-19 15:49
黑芝麻糊

黑芝麻糊

回复 黑芝麻糊:
我操作是在manifest.json上操作的
2018-11-19 15:47
黑芝麻糊

黑芝麻糊

直接修改底部tab的text颜色失败,在textStyles里面添加color属性,text颜色没有变化。夜间模式的需求能满足吗?
2018-11-19 15:46
lvsh2012@gmail.com

lvsh2012@gmail.com

回复 王裕会:
没有
2018-11-06 16:13
Lspring

Lspring

请问,我只想要底部这个nview,不需要中间凸起的按钮,我把绘制方法去掉,没有加入webview里,但是中间会空出一块白色的区域。除了在manifest.json里修改图标的left距离,还有什么方法能实现去掉空白的区域?
2018-11-06 11:19
王裕会

王裕会

回复 lvsh2012@gmail.com:
你的这个问题有人回复吗?
2018-11-05 17:39
王裕会

王裕会

回复 yooluo@qq.com:
请问你这个问题解决了吗?怎么解决的?
2018-11-05 17:34
lvsh2012@gmail.com

lvsh2012@gmail.com

如果我的底部菜单有一个按钮叫做“消息”,我可以在这个底部菜单上加上红点,或者加上一个未读消息的数字吗?需要怎么实现
2018-10-28 17:13
落日逢佳雨

落日逢佳雨

回复 一路格桑花:
这个tab底部选项卡的图标是怎么自定义的。求解大神
2018-10-18 19:03
1961923183@qq.com

1961923183@qq.com

原生table 非首页 沉浸式栏可以解决吗?
2018-10-12 20:18
绝地求生

绝地求生

我就想知道,用这种模式,如果有遮罩层怎么办?底部导航是盖不住的,无法达到原生的效果,而且体验也不好
2018-09-28 09:24
452966517@qq.com

452966517@qq.com

您好,我按照您的demo写的时候,如果给一个列表页面添加了下拉刷新事件,会在下拉的过程中,看到底部的home页面内容,请问这种问题要怎么避免好一点呢?
2018-09-20 11:20
一路格桑花

一路格桑花

回复 李虎:
你的问题现在解决了吗
2018-09-19 13:59
cydida

cydida

可以自定义图片来画吗?图标部分,而不采用字体【 "fontSrc": "_www/fonts/mui.ttf",】
2018-09-18 17:16
765790405@qq.com

765790405@qq.com

请问点击导航更改颜色的同时,想换一个图标怎么实现
2018-09-11 17:29
一路格桑花

一路格桑花

回复 李虎:
我看其他人说使用这个方法可以 你可以试试
mui.init({
keyEventBind: {
backbutton: false, //Boolean(默认true)关闭back按键监听
menubutton: true //Boolean(默认true)关闭menu按键监听
}
});
2018-09-07 13:40
一路格桑花

一路格桑花

回复 李虎:
这个问题我也有 暂时还没解决方法 坑~
2018-09-07 12:02
李虎

李虎

回复 一路格桑花:
双击导航按钮,页面会白屏.
2018-09-06 21:30
一路格桑花

一路格桑花

回复 李虎:
你是什么问题
2018-09-06 14:51
李虎

李虎

回复 一路格桑花:
我也遇到了,请问您怎么解决的?
2018-09-05 02:50
一路格桑花

一路格桑花

还有一个问题,双击导航按钮,页面会白屏,不知道你们的有没有出现过,我的是用的图片代替图标的
2018-09-03 00:18
一路格桑花

一路格桑花

回复 一路格桑花:
解决了,需要manifest.json 单独配置
2018-09-03 00:12
一路格桑花

一路格桑花

回复 rvean:
可以,但是不知道用图片怎样控制显示的大小
2018-09-03 00:03
一路格桑花

一路格桑花

如果用图片,在哪控制图片显示大小?我的底部导航栏不能手机显示,所以无法调试
2018-09-03 00:02
一路格桑花

一路格桑花

回复 gzg:
我的思路是 获取底部导航栏的ID,让其显示(plus.webview.show)
2018-09-02 23:56
gzg

gzg

请问除了在底部导航的几个页面可以显示导航外,要在其他的详情页面也显示底部的导航界面,要怎么弄?
2018-08-28 08:47
张释

张释

回复 arjen:
请问你实现了没有
2018-08-08 18:52
心若为城

心若为城

请问一在这里面怎样实现双语言的切换了
2018-08-08 14:52
joygezxp@126.com

joygezxp@126.com

横竖屏切换后,中间悬浮按钮的位置不能居中
2018-07-31 10:48
3212306696@qq.com

3212306696@qq.com

我就想问下,这个除了那个凸起按钮之外其它的按钮跳转都是在util.js文件中的option配置吗?为什么我配置好之后一直都是报请求的页面无法打开这个错误。路径我各种都写了,相对,绝对 跪求解答
2018-07-16 09:17
522966026@qq.com

522966026@qq.com

我想问一下从另外一个没有该tabbar的页面跳转到这个带tabbar的页面怎么实现
2018-07-11 13:11
inoongt@gmail.com

inoongt@gmail.com

选项卡文字直接在manifest.json 中配置,这样怎么做国际化?
2018-07-10 10:18
tutuhuai

tutuhuai

存在很多bug 在安卓设备 三星上,旋转设备,图标显示异常,详情页面回退失效,无法点中,旋转设备方可点击
2018-06-15 09:25
efeiwork

efeiwork

回复 yooluo@qq.com:
兄弟解决了吗?同问。
2018-06-13 12:02
efeiwork

efeiwork

请问自定义改图标后,如何修改默认颜色(蓝色)?通过manifest.josn 改不了。哪位高手能帮忙一下。谢谢!
2018-06-13 12:00
Yizhiyu

Yizhiyu

mark
2018-06-04 10:08
Yizhiyu

Yizhiyu

回复 nearwmy@gmail.com:
我的是被遮盖。PC测试可以看到这个导航,但是覆盖原因是什么?
2018-06-02 18:57
562619057@qq.com

562619057@qq.com

回复 KitJack:
您好!请问解决了吗?我碰到了同样问题。
2018-05-21 07:22
初生牛犊

初生牛犊

请问app中需要先登录再加载底部导航栏的应该怎么配置manifest
2018-05-18 10:15
小河

小河

非应用首页的要怎么做呢?比如有登录页面的,登录之后的主页是父子webview的,这种怎么处理?
2018-05-10 17:18
lqczzyx@sina.com

lqczzyx@sina.com

回复 nearwmy@gmail.com:
我如果要自定义tab样式,以及在tab上加一个角标应该怎么做?
2018-04-14 11:22
rvean

rvean

请问底部按钮可以不用字体图标,用图片?
2018-03-27 23:54
橘子的二当家

橘子的二当家

回复 nearwmy@gmail.com:
util.js ACTIVE_COLOR
2018-03-21 19:41
ly2462153@sina.com

ly2462153@sina.com

如果在方法中获取到原生tab对象呢?
我需要生成tab后,给tab写一个单击事件,让tab单击时写相应的代码
2018-03-21 14:39
757682793@qq.com

757682793@qq.com

回复 nearwmy@gmail.com:
请问setStyle具体怎么实现呢,小白大学生一枚,刚入手,被这个底部选项卡加登录模板搞死了。。
2018-03-20 23:03
兰刃

兰刃

回复 KitJack:
https://github.com/dcloudio/mui/tree/master/examples/nativeTab
2018-03-12 23:08
KitJack

KitJack

回复 KitJack:
我的首页是登录页,这样会导致底部菜单会显示,然后进入主页面则显示中间一个,其他菜单就没法显示了,望解答,谢谢
2018-03-09 23:18
KitJack

KitJack

回复 nearwmy@gmail.com:
有demo吗?谢谢
2018-03-09 23:10
孙英俊

孙英俊

不好用,如果这个底部按钮使用图片,怎么居中呢?是不是只能在index中用js计算后再加上去了,感觉真没有双webview好用,学习起来好麻烦
2018-02-22 15:43
孙英俊

孙英俊

请问使用自定义的图片作为标签页的图标,如何实现点击激活后图片更换src?
2018-02-21 17:17
tassassin@sina.com

tassassin@sina.com

回复 nearwmy@gmail.com:
新手求教。。setStyle是mui.setStyle吗?写在tab的js里?
2018-02-06 23:33
597763638@qq.com

597763638@qq.com

回复 nearwmy@gmail.com:
遇到了闪退的问题,将utils.js 中changeSubpage plus.webview.getLaunchWebview 修改为plus.webview.currentWebview既可。。。
2018-01-30 17:43
叶雨

叶雨

在荣耀8上,圆球直接跑到左边去了!咋回事
2018-01-29 10:39
1007768971@qq.com

1007768971@qq.com

回复 414152322@qq.com:
这两种方式都行,为了性能,可以在一个tabBar中写4个tab。我也是刚看到的,不对的地方还望指正。
2018-01-26 11:04
arjen

arjen

回复 nearwmy@gmail.com:
用subnview创建的tabbar发现侧滑菜单出来了遮罩遮不住tabbar,请问怎么解决啊?
2018-01-25 18:11
1007768971@qq.com

1007768971@qq.com

回复 青柠脉动:
嗯,谢谢,我也找到了,原来不管电脑浏览器和手机浏览器,甚至微信公众号端都不是5+运行环境,所以那些基于5+环境的原生api是没法用了。
2018-01-25 16:03
770516426@qq.com

770516426@qq.com

demo中的util.js文件写得有点小问题,方法changeSubpage中,aniShow[targetPage]改为aniShow[targetPage.id],temp[targetPage]改为temp[targetPage.id]
2018-01-23 15:24
青柠脉动

青柠脉动

回复 1007768971@qq.com:
我刚刚试了,手机上可以,电脑端无效
2018-01-23 11:17
414152322@qq.com

414152322@qq.com

上面的实例只写了一个tab ,有没有完整的demo啊,,,或者如果我需要4个tab,,我是要写4个tabBar,,,还是在tabBar里面的tags里面写4个 tag啊?????????????
2018-01-22 13:32
1007768971@qq.com

1007768971@qq.com

为什么打开底部的菜单不显示,是不是subnview只能在手机上调试显示,电脑上不显示呢?
2018-01-19 15:16
77528395@qq.com

77528395@qq.com

我使用的本页介绍的“基于subnview模式的原生tab”做APP选项卡,有两个问题:
1.首页为第一个tab窗口页面,进入后验证token,如没有则进入login页。此时首页及其余tab窗口由于在无token状态下加载页面,登陆账号后,因页面加载完毕,所以不现实相关getjson得到的数据。目前使用login页fire参数,重新加载首页,请问有没有更好的办法?
2.首页为第一个tab窗口页面,使用tab-top-webview-main.html双webview作为第二个页面,此时进入APP会出差,一直显示等待加载的loading窗口,请问有什么解决办法?
2018-01-18 10:48
nearwmy@gmail.com

nearwmy@gmail.com (作者)

回复 arjen:
首页是登录页面的话,你就不能像示例那样将subnview写在manifest.json中,那里是配置给首页就有tabbar需求的。你可以在create你的tab主页时,通过setStyle{subNViews:[]} 的方法传入tabbar选项卡内容,同样也会以原生的方式渲染。监听的方法和示例是一样的,只是将初始化subNView的方法放在不同的位置。
2018-01-15 14:52
arjen

arjen

回复 arjen:
tab bar需要根据权限来判断是否会隐藏一个按钮,这能实现吗
2018-01-15 14:12
arjen

arjen

我的首页是登录界面,登录成功后才进入tab主页面,主页面的首页导航栏上要加搜索栏,请问有好的解决思路吗,现在我用的双webview模式很卡
2018-01-12 17:24
1019422167@qq.com

1019422167@qq.com

回复 1019422167@qq.com:
设置了titleNview 理解到 ‘’兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容‘’这句话了。 但是虽然没有遮挡,但是这样子界面都共用一个title了,违背常理啊? 还需要自己去配置其他子界面的title,很麻烦。 感觉这个方案没有双webview灵活。得再优化实现既能单独设置titleNview又不影响各界面的沉浸式
2018-01-10 10:26
1019422167@qq.com

1019422167@qq.com

回复 1019422167@qq.com:
// //兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容
// if(mui.os.android) {
// if(plus.navigator.isImmersedStatusbar()) {
// subpage_style.top += plus.navigator.getStatusbarHeight();
// }
// if(self.getTitleNView()) {
// subpage_style.top += 40;
// }
//
// }
我把这段代码取消了。其他界面也有效果了。但是不明白为什么要让其他子界面不沉浸(不应该是每个界面都沉浸,特别是我的界面)。设置沉浸式模式会遮盖子webview内容?这句话实际不是应该是子webview在遮挡首页么?
2018-01-10 10:04
1019422167@qq.com

1019422167@qq.com

配置了沉浸式,为什么只有首页和新窗口才有效果,消息、通讯录不是沉浸式。难道是因为是首页子页面的原因? 如果要所有页面都沉浸该怎么配置?????
2018-01-10 09:52