枫桥居APP
枫桥居APP
  • 发布:2017-09-07 00:08
  • 更新:2017-12-08 11:49
  • 阅读:1846

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

分类:HTML5+

官方给了一个tabbar的demo,但代码碎片太严重,追踪起来也特别费劲,所以我就重构了一下代码。现在把一些思路分享给大家,同时也建议官方能把demo的代码尽量规范化。毕竟是开源嘛,代码是给千千万万的开发者阅读的,尽量追求极致,这样更能显得官方的技术实力:)。

代码实现的功能: 点击tabbar切换颜色
未实现的功能: 子webview切换


var tabbar = {  
    options: {  
        active_color: '#42BD56',  
        font_color: '#cccccc',  
        subpages: [{  
            url: './page/notice.html',  
            title: '通知'  
        }, {  
            url: './page/more.html',  
            title: '发现'  
        }, {  
            url: './page/my.html',  
            title: '我'  
        }]  
    },  
    init: function() {  
        //设置第一个item为选中  
        tabbar.selectItem(0)  

        //这里可以放初始化子webview,待实现  

    },  
    //重置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)  
        }  

        //这里可以重置子webview,待实现  
    },  
    //设置选中的item  
    selectItem: function(index) {  
        tabbarItems[index].tags[0].textStyles.color = tabbar.options.active_color  
        tabbarItems[index].tags[1].textStyles.color = tabbar.options.active_color  
        self.updateSubNViews(tabbarItems)  

        //这里可以显示点击的webview,待实现  
    }  
}

如何调用


var self, tabbarItems = [];  

mui.plusReady(function() {  
    self = plus.webview.currentWebview()  
    tabbarItems = self.getStyle().subNViews  
    tabbar.init()  
})  

当然我这个是基于官方的思路,只是重新整理了一下代码,官方的实力还是很牛的!这里也不是说我代码非常好,只是希望尽量简洁一点。

接下的功能:实现点击切换子webview

2017-09-07 00:08 2 条评论 负责人:无 分享
已邀请:
枫桥居APP

枫桥居APP (作者)

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


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)  
            }  
        }  
    }  
}
诚展小刚

诚展小刚 - H5菜鸟

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

  • 枫桥居APP (作者)

    可以,看我评论

    2017-09-09 18:50

  • 枫桥居APP (作者)

    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');

    }

    2017-09-09 18:52

枫桥居APP

枫桥居APP (作者)

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

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');  
}  
诚展小刚

诚展小刚 - H5菜鸟

谢谢楼主,非常感谢

cydida

cydida

有没有demo提供一下,谢谢

要回复问题请先登录注册