关于使用原生标题,官方给出的方案是,在manifest.json中配置首页原生标题
如果是打开新页面,则可以配置mui.openWindow里面的titleNView来设置标题与按钮
但是,不支持动态修改原生标题。
最近在开发一个app,需要底部tar,关于此效果最好的方法,官方已经给出了一个demo
具体可看:http://ask.dcloud.net.cn/article/12602
我的需求:点击下面的选项卡的时候,原生标题可以显示不同的文字 ,比如点击'分类'的时候,标题上显示的是’分类‘
但是通过找api,发现,确实不能动态修改标题,不过克想到一个弯道超车的方法:
通过找api,发现不能动态修改,但是可以在这个原生View上添加新的文字,于是就想到了下面的方法:
就是在manifest.json中,原生标题titletext的值为空,这样就首页的标题就是空的,啥也没有
然后在首页的代码中,对这个原生View对象进行绘制文字,并且在点击选项卡的时候,先执行View.reset(),即清空,再重新绘制新的文字
这样就算是动态修改标题了,相关代码如下:
function titleRedraw(id)
{
var titleArr = ['首页','分类','购物车','个人中心'];
var scan = window.innerWidth - 34;
_self = plus.webview.currentWebview();
var titleView = _self.getNavigationbar();
var bitmap_menu = new plus.nativeObj.Bitmap("saoyisao");
titleView.reset();
titleView.drawText(titleArr[id], {}, {color:'#ffffff'});
//以下代码为在右上角添加扫一扫按钮,不需要的可以删除
bitmap_menu.load("images/saoyisao.png");
titleView.drawBitmap(bitmap_menu, {}, {
top: "10px",
right: "10px",
width: "24px",
height: "24px",
color:'#ffffff'
});
titleView.interceptTouchEvent(true);
titleView.addEventListener("click", function(e) {
var x = e.clientX;
if(x > scan) { //触发menu菜单
console.log('扫一扫');
}
}, false);
}
在首页可第一时间执行的地方,先执行一遍titleRedraw(0);这样显示的就是首页,
然后在点击底部选项卡的地方,再执行一遍,并传入对应的下标就可以了
===========担心的问题===========
现在比较担心的就是,因为一直在重绘,所以对性能影响大不大?有没有大牛可以出来帮忙解释一下。
另外还有一个优化的地方,不知道可不可行:即不使用reset()来清空所有
比如我这个,所有页面都有右上角的按钮,那就只清除drawText所绘制的内容,是不是可行?
3 个评论
要回复文章请先登录或注册
aliang888
一个网名 (作者)
DCloud_heavensoft