mui开发混编app--01--底部选项卡制作教程

其他 2018-09-02 18:11:18 阅读次数: 0
版权声明：欢迎转载，欢迎技术交流，转载声明出处即可@@ https://blog.csdn.net/qq_36389107/article/details/81413992

原生底部选项卡教程
1.创建app项目
打开hb–文件–新建–移动app–输入项目名字–勾选mui项目–点击完成即可
查看

2.修改manifest.json文件
找到项目—选择manifest.json文件–按住ctrl+f检索plus–添加如下代码

"launchwebview": {//首页webview窗口
            "bottom": "0px",
            "background": "#fff",
            "subNViews": [//subNViews节点下配置你的tab （此处只给出一个tab配置示例）
                {
                    "id": "tabBar",
                    "styles": {
                        "bottom": "0px",
                        "left": "0",
                        "height": "50px",
                        "width": "100%",
                        "backgroundColor": "#fff"
                    },
                    "tags": [
                        {
                            "tag": "font",
                            "id": "indexIcon",
                            "text": "\ue611",
                            "position": {
                                "top": "4px",
                                "left": "0",
                                "width": "20%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/iconfont.ttf",
                                "align": "center",
                                "size": "24px",
                                "color": "#bdbdbd"
                            }
                        }, {
                            "tag": "font",
                            "id": "indexText",
                            "text": "铺子",
                            "position": {
                                "top": "23px",
                                "left": "0",
                                "width": "20%",
                                "height": "24px",
                                "color": "#bdbdbd"
                            },
                            "textStyles": {
                                "align": "center",
                                "size": "10px"
                            }
                        }, {
                            "tag": "font",
                            "id": "typeIcon",
                            "text": "\ue61d",
                            "position": {
                                "top": "4px",
                                "left": "20%",
                                "width": "20%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/iconfont.ttf",
                                "align": "center",
                                "size": "24px",
                                "color": "#bdbdbd"
                            }
                        }, {
                            "tag": "font",
                            "id": "typeText",
                            "text": "分类",
                            "position": {
                                "top": "23px",
                                "left": "20%",
                                "width": "20%",
                                "height": "24px",
                                "color": "#bdbdbd"
                            },
                            "textStyles": {
                                "align": "center",
                                "size": "10px"
                            }
                        }, {
                            "tag": "font",
                            "id": "topicIcon",
                            "text": "\ue60f",
                            "position": {
                                "top": "4px",
                                "left": "40%",
                                "width": "20%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/iconfont.ttf",
                                "align": "center",
                                "size": "24px",
                                "color": "#bdbdbd"
                            }
                        }, {
                            "tag": "font",
                            "id": "topicText",
                            "text": "社区",
                            "position": {
                                "top": "23px",
                                "left": "40%",
                                "width": "20%",
                                "height": "24px",
                                "color": "#bdbdbd"
                            },
                            "textStyles": {
                                "align": "center",
                                "size": "10px"
                            }
                        }, {
                            "tag": "font",
                            "id": "pubIcon",
                            "text": "\ue610",
                            "position": {
                                "top": "4px",
                                "left": "60%",
                                "width": "20%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/iconfont.ttf",
                                "align": "center",
                                "size": "24px",
                                "color": "#bdbdbd"
                            }
                        }, {
                            "tag": "font",
                            "id": "pubText",
                            "text": "发布",
                            "position": {
                                "top": "23px",
                                "left": "60%",
                                "width": "20%",
                                "height": "24px",
                                "color": "#bdbdbd"
                            },
                            "textStyles": {
                                "align": "center",
                                "size": "10px"
                            }
                        }, {
                            "tag": "font",
                            "id": "perIcon",
                            "text": "\ue60e",
                            "position": {
                                "top": "4px",
                                "left": "80%",
                                "width": "20%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/iconfont.ttf",
                                "align": "center",
                                "size": "24px",
                                "color": "#bdbdbd"
                            }
                        }, {
                            "tag": "font",
                            "id": "perText",
                            "text": "个人",
                            "position": {
                                "top": "23px",
                                "left": "80%",
                                "width": "20%",
                                "height": "24px",
                                "color": "#bdbdbd"
                            },
                            "textStyles": {
                                "align": "center",
                                "size": "10px"
                            }
                        }
                    ]
                }
            ]
        }

强行解释一波，_www/fonts/iconfont.ttf文件是来自与alibaba矢量图标库。图标制作好以后css文件李会有相应的字体代码，如上图的\ue60e,但是字体文件没有u这个字母，加上即可。你们也可以换成mui自带的字体样式。
这里写图片描述
关于这么配置的原因，请参考这篇文章
连上手机，建议安卓。苹果的话，在windows，你还需要下载ituns。点击运行。选择你的手机运行（手机打开开发者模式）
你会看见图标已经加载上去了，如下
这里写图片描述
接下来，我们要做的就是这几个事情。

  • 默认第一个图标被选上，并首页显示
  • 为分类，社区，发布，个人这几个模块添加页面，即首页加入这四个模块的子页面，并默认隐藏
  • 点击相应图标，图标激活，页面激活，其他图标恢复，页面如果不是首页则隐藏
    4. 默认第一个图标被选上，并首页显示
    我们现在首页的body上写点东西吧
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
    <div class="mui-content">
            我是首页
        <p>我是首页的p标签</p>
        <span>我是首页的span标签</span>
    </div>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
</body>
</html>

接着想一想我们怎么才能实现选项卡的第一个图标的显示呢，大概有以下几个步骤

  1. 获取选项卡
  2. 给选项卡的第一个区域内的所有文字改变颜色。由于使用的字体文件，图标也是字体
    先做第一个，获取选项卡
var nview=plus.nativeObj.View.getViewById("tabBar")

里面的id字符串为第一步配置文件的名字，该方法依然参考这篇文章
接着我们将第一个图标跟字体颜色换了

// 获取图标
var indexTag=plus.webview.currentWebview().getStyle().subNViews[0].tags[0]
// 获取字体
var indexText=plus.webview.currentWebview().getStyle().subNViews[0].tags[1]
// 设置图标与字体的颜色
 indexTag.textStyles.color = "#ff366c"
 indexText.textStyles.color = "#ff366c"
// 重新绘制新的样式
nview.drawText(indexTag.text, indexTag.position, indexTag.textStyles, indexTag.id);
nview.drawText(indexText.text, indexText.position, indexText.textStyles, indexText.id);

好了，大功告成。图标渲染完成了。
接下来，我们为所有的图标绑定点击事件，在点击相应图标的时候图标颜色激活其他的取消激活，同时，页面进行相应的切换。因此大概分为一下几个步骤：
1.在项目下建立type.html,topic.html,add.html及person.html
2.在主页中添加这4个页面作为子页面，并隐藏起来
3.为底部图标绑定点击事件，点击第一个图标，所有子页面隐藏起来，点击第二个，分类页面显示，第二个图标激活。其余图标不激活。后面三个同上。
代码如下:

//子页面数组
var subpages = ["views/type.html", "views/topic.html", "views/add.html", "views/person.html"];
//循环添加子页面并隐藏
var subpage_style = {
                    top: 0,
                    bottom: 51
                }
//兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容
if(mui.os.android) {
    if(plus.navigator.isImmersedStatusbar()) {
        subpage_style.top += plus.navigator.getStatusbarHeight();
    }
    if(self.getTitleNView()) {
        subpage_style.top += 40;
    }

}
for(var i = 0, len = subpages.length; i < len; i++) {
    if(!plus.webview.getWebviewById(subpages[i])) {
        var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
        //初始化隐藏
        sub.hide();
        // append到当前父webview
        self.append(sub);
    }
}
// 绑定事件
var currIndex =0;// 中间变量(用于标记第几个图标被点击了)
var targetPage = plus.webview.currentWebview();// 中间变量,用于标记想要跳转的页面
var activePage = plus.webview.currentWebview();// 中间变量，用于标记当前激活的页面
nview.addEventListener('click', function(e) {
    var clientX = e.clientX;
    if(clientX > 0 && clientX <= parseInt(pageW * 0.2)) {
        currIndex = 0;
    } else if(clientX > parseInt(pageW * 0.2) && clientX <= parseInt(pageW * 0.4)) {
        currIndex = 1;
    } else if(clientX > parseInt(pageW * 0.4) && clientX <= parseInt(pageW * 0.6)) {
        currIndex = 2;
    } else if(clientX > parseInt(pageW * 0.6) && clientX <= parseInt(pageW * 0.8)) {
        currIndex = 3;
    } else {
        currIndex = 4;
    }
    if(currIndex > 0) {
        targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
    } else {
        targetPage = plus.webview.currentWebview();
    }
    if(targetPage == activePage) {
        return;
    }
    //底部选项卡切换
    toggleNview(currIndex);
    // 子页面切换
    changeSubpage(targetPage, activePage, aniShow);
    //更新当前活跃的页面
    activePage = targetPage;
});
var ACTIVE_COLOR = "#ff366c"; // 激活图标颜色
var NORMAL_COLOR = "#bdbdbd"  // 默认图标颜色
// 点击发生图标的重绘
function toggleNview(currIndex) {
    currIndex = currIndex * 2;
    // 重绘当前tag 包括icon和text，所以执行两个重绘操作
    updateSubNView(currIndex, ACTIVE_COLOR);
    updateSubNView(currIndex + 1, ACTIVE_COLOR);
    for(var i = 0; i < 10; i++) {
        if(i !== currIndex && i !== currIndex + 1) {
            updateSubNView(i, NORMAL_COLOR);
        }
    }
}
//  点击子页面发生变化
function updateSubNView(currIndex, color) {
                    var self = plus.webview.currentWebview();
                    var nviewEvent = plus.nativeObj.View.getViewById("tabBar");
                    var nviewObj = self.getStyle().subNViews[0];
                    var currTag = nviewObj.tags[currIndex];
                    nviewEvent.drawText(currTag.text, currTag.position, changeColor(currTag.textStyles, color), currTag.id);
    }

好了，这个样子基本上基础的架构就完成了就大功告成了
下一篇将会更新前端图片处理的问题

猜你喜欢

转载自blog.csdn.net/qq_36389107/article/details/81413992
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022