【代码片段分享】给大家分享一个原生绘制tabbar的方法，官方虽然提供了demo但代码可读性非常糟

这是完整的封装方法,包括点击事件,页面切换

var tabbar = {  
    options: data.tabbar,  
    init: function() {  
        //预处理子3个webview  
        var nViews = self.getSubNViews()  
        for(var i = 0; i < 3; i++) {  
            //预加载子webview   
            var subWebview = tabbar.options.subpages[i]  
            if(!plus.webview.getWebviewById(subWebview.url)) {  
                var styles = {  
                    top: '44px',  
                    bottom: '51px',  
                    title: subWebview.title  
                }  
                if(mui.os.ios) {  
                    styles = {  
                        top: '0px',  
                        bottom: '51px',  
                        title: subWebview.title  
                    }  
                }  
                var wb = plus.webview.create(subWebview.url, subWebview.url, styles);  
                wb.hide();  
                self.append(wb)  
            }  

            //设置item事件  
            nViews[i + 1].addEventListener('click', function(e) {  
                //获取index  
                var id = e.target.id ? e.target.id : e.target.__id__  
                var index = parseInt(id.substr(id.length - 1, 1) - 1);  
                if(currIndex == index) {  
                    //重复点击  
                    return  
                }  
                currIndex = index  
                //重置item  
                tabbar.reselectItem()  
                //选中item  
                tabbar.selectItem(index)  
            }, false);  
        }  
        //设置第一个item事件  
        nViews[0].addEventListener('click', function(e) {  
            //获取index  
            var id = e.target.id ? e.target.id : e.target.__id__  
            var index = parseInt(id.substr(id.length - 1, 1) - 1);  
            if(currIndex == index) {  
                //重复点击  
                return  
            }  
            currIndex = 0  
            //重置item  
            tabbar.reselectItem()  
            //选中item  
            tabbar.selectItem(index)  
        }, false);  
    },  
    //重置item  
    reselectItem: function(totalNum) {  
        var totalNum = totalNum ? totalNum : 4  
        for(var i = 0; i < totalNum; i++) {  
            tabbarItems[i].tags[0].textStyles.color = tabbar.options.font_color  
            tabbarItems[i].tags[1].textStyles.color = tabbar.options.font_color  
            self.updateSubNViews(tabbarItems)  
        }  
    },  
    //设置选中的item  
    selectItem: function(index) {  
        var title = '花友圈'  
        tabbarItems[index].tags[0].textStyles.color = tabbar.options.active_color  
        tabbarItems[index].tags[1].textStyles.color = tabbar.options.active_color  
        self.updateSubNViews(tabbarItems)  

        //显示子webview  
        if(index > 0) {  
            title = tabbar.options.subpages[index - 1].title  
            plus.webview.show(tabbar.options.subpages[index - 1].url)  
        }  

        //更新title  
        headView.drawText(title, {}, {  
            color: '#fff',  
            size: '16px'  
        }, 'indexTitle');  

        //隐藏其它子webview  
        for(i = 0; i < 3; i++) {  
            if(i != (index - 1)) {  
                plus.webview.hide(tabbar.options.subpages[i].url)  
            }  
        }  
    }  
}

能不能贴一下你那个【新通知】点击的事件代码，谢谢，子页面调用的

点击首页通知进入通知页面

function openNotice() {  
    data.noticeNum = 0  

    //重置item  
    tabbar.reselectItem()  
    //选中item  
    tabbar.selectItem(1)  

    currIndex = 1  

    //刷新通知事件  
    mui.fire(plus.webview.getWebviewById(data.tabbar.subpages[currIndex - 1].url), 'getnotice');  
}  

谢谢楼主，非常感谢

有没有demo提供一下，谢谢