一个网名
一个网名
  • 发布:2018-06-04 18:26
  • 更新:2020-07-22 16:15
  • 阅读:3555

动态修改原生标题的方法——弯道超车---翻车了~看评论吧

分类:HTML5+

关于使用原生标题,官方给出的方案是,在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所绘制的内容,是不是可行?

0 关注 分享

要回复文章请先登录注册

aliang888

aliang888

回复 DCloud_heavensoft :
不能去除buttons[]定议的按钮吧?我现在是把按钮宽度设置成了,好像也达到了目的,webview.setTitleNViewButtonStyle(0, {type:'none',width:'0px'});
2020-07-22 16:15
一个网名

一个网名 (作者)

回复 DCloud_heavensoft :
找到了,plus.webview.currentWebview().setStyle({titleNView:{titleText:'new text'}}),好尴尬啊,弄了一下午,,,,明天试试
2018-06-04 21:45
DCloud_heavensoft

DCloud_heavensoft

调webview的setstyle,可以重设titilnview的所有属性,包括标题。。。
2018-06-04 19:51