3***@qq.com
3***@qq.com
  • 发布:2018-07-16 17:36
  • 更新:2018-07-16 17:36
  • 阅读:2409

mui底部按钮凸起

分类:MUI

function() {
mui.init({
swipeBack: true //启用右滑关闭功能
});

            mui.plusReady(function() {  
                plus.key.addEventListener('backbutton',function(){  
                    nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();  
                },false);  
                var self = plus.webview.currentWebview(),  
                    leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中  
                /**   
                 * 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',  
                    text:'出行',  
                    position: {  
                        top: '5px',  
                        left: '5px',  
                        width: '50px',  
                        height: '50px'  
                    },  
                    rectStyles: {  
                        color: '#248DC4',  
                        radius: '50%',  
                    }  
                }, {  
                    tag: 'font',  
                    id: 'icon',  
                    text: '\ue6c2', //此为字体图标Unicode码'\e600'转换为'\ue600'  
                    position: {  
                        top: '0px',  
                        left: '5px',  
                        width: '50px',  
                        height: '100%'  
                    },  
                    textStyles: {  
                        fontSrc: '../commom/fonts/iconfont.ttf',  
                        align: 'center',  
                        color: '#fff',  
                        size: '30px'  
                    }  
                }  
                ]);  
                // 将绘制的凸起 append 到父webview中  
                self.append(drawNativeIcon);  

                //凸起圆的点击事件  
                var active_color = '#fff';  
                drawNativeIcon.addEventListener('click', function(e) {  
                    mui.openWindow({  
                        id:'meter',  
                        url:'meter.html'  
                    })  
                    if(active_color == '#fff'){  
                        drawNativeIcon.drawText('\ue6c2', {}, {  
                            fontSrc: '../commom/fonts/iconfont.ttf',  
                            align: 'center',  
                            color: '#000',  
                            size: '30px'  
                        }, 'icon');  
                        active_color = '#000';  
                    } else {  
                        drawNativeIcon.drawText('\ue6c2', {}, {  
                            fontSrc: '../commom/fonts/iconfont.ttf',  
                            align: 'center',  
                            color: '#fff',  
                            size: '30px'  
                        }, 'icon');  
                        active_color = '#fff';  
                    }  
                    // 重绘字体颜色  

                });  
                // 中间凸起图标绘制及监听点击 完毕  

                // 创建子webview窗口 并初始化  
                var aniShow = {};  
                util.initSubpage(aniShow);  
                //初始化相关参数  
                var nview = plus.nativeObj.View.getViewById('tabBar'),  
                    activePage = plus.webview.currentWebview(),  
                    targetPage,  
                    subpages = util.options.subpages,  
                    pageW = window.innerWidth,  
                    currIndex = 0;  
                /**  
                 * 根据判断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(plus.webview.getWebviewById(subpages[currIndex].id)==plus.webview.currentWebview()){  
                            return;  
                        }else{  
                            targetPage=plus.webview.getWebviewById(subpages[currIndex].id);  
                        }  
                            //底部选项卡切换  
                            util.toggleNview(currIndex);  
                            util.changeSubpage(targetPage,activePage,aniShow);  
                            activePage=targetPage;  
                });  
            });  
        })();  

我在底部绘制绘制这个凸起按钮。然后不在mainfest.json里配置其它的导航按钮,应该怎么弄???我创建一个新的webview但是显示不出来 只有这个凸起按钮

2018-07-16 17:36 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复