mui APP tab选项卡底部凸出图标解决实例

今天，我爱模板网用mui做app时，遇到了可能各位都遇到过的头疼问题：底部中间图标凸起，如下图：

    其实官方已经给出详细解决方案： tab选项卡示例教程-基于subnview模式的原生tab（含底部凸起大图标）

    但是官方的案例首页是写死的，并且图标是字体图标，不是图片，还有其他一些效果都和我们平时的需求不同，所以，我爱模板网对其进行了改良，下面是相关代码，具体就不解释了：

1、mainifest.json代码修改如下，主要就是将官方 mui tab底部凸起案例 的字体图标换成了图片：

01 "launchwebview": {
02  "bottom": "0px",
03  "background": "#fff",
04  "subNViews": [
05  {
06  "id": "tabBar",
07  "styles": {
08  "bottom": "0px",
09  "left": "0",
10  "height": "50px",
11  "width": "100%",
12  "backgroundColor": "#fff"
13  },
14  "tags": [
15  {
16  "tag": "img",
17  "id": "homeIcon",
18  "src": "images/home_nor.png",
19  "position": {
20  "top": "4px",
21  "left": "10%",
22  "width": "25px",
23  "height": "40px"
24  }
25  },{
26  "tag": "img",
27  "id": "scheduleIcon",
28  "src": "images/schedule_nor.png",
29  "position": {
30  "top": "4px",
31  "left": "30%",
32  "width": "25px",
33  "height": "40px"
34  }
35  },{
36  "tag": "img",
37  "id": "goodsIcon",
38  "src": "images/goods_nor.png",
39  "position": {
40  "top": "4px",
41  "left": "65%",
42  "width": "25px",
43  "height": "40px"
44  }
45  },{
46  "tag": "img",
47  "id": "mineIcon",
48  "src": "images/mine_nor.png",
49  "position": {
50  "top": "4px",
51  "left": "85%",
52  "width": "25px",
53  "height": "40px"
54  }
55  }
56  ]
57  }
58  ]
59 }

2、util.js代码修改如下（主要将字体颜色配置都换成了图片，并且将subpages变成了对象数组，增加了id和url字段，这样更加符合实际需求，新增了首页，并且初始化显示第一页）：

001 var util = {
002  options: {
003  ACTIVE_SRC1: "images/home_click.png",
004  NORMAL_SRC1: "images/home_nor.png",
005  ACTIVE_SRC2: "images/schedule_click.png",
006  NORMAL_SRC2: "images/schedule_nor.png",
007  ACTIVE_SRC3: "images/goods_click.png",
008  NORMAL_SRC3: "images/goods_nor.png",
009  ACTIVE_SRC4: "images/mine_click.png",
010  NORMAL_SRC4: "images/mine_nor.png",
011  subpages: [{
012  url : 'pages/home.html',
013  id : 'home'
014  },{
015  url : 'pages/schedule.html',
016  id : 'schedule'
017  },{
018  url : 'pages/goods.html',
019  id : 'goods'
020  },{
021  url : 'pages/mine.html',
022  id : 'mine'
023  },]
024  },
025  /**
026   *  简单封装了绘制原生view控件的方法
027   *  绘制内容支持font（文本，字体图标）,图片img , 矩形区域rect
028   */
029  drawNative: function(id, styles, tags) {
030  var view = new plus.nativeObj.View(id, styles, tags);
031  return view;
032  },
033  /**
034   * 初始化首个tab窗口 和 创建子webview窗口
035   */
036  initSubpage: function(aniShow) {
037  var subpage_style = {
038  top: 0,
039  bottom: 51
040  },
041  subpages = util.options.subpages,
042  self = plus.webview.currentWebview(),
043  temp = {};
044  //兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容
045  if(mui.os.android) {
046  if(plus.navigator.isImmersedStatusbar()) {
047  subpage_style.top += plus.navigator.getStatusbarHeight();
048  }
049  if(self.getTitleNView()) {
050  subpage_style.top += 40;
051  }
052  }
053
054  // 初始化第一个tab项为首次显示
055  temp[self.id] = "true";
056  mui.extend(aniShow, temp);
057
058  // 初始化绘制首个tab按钮
059  util.toggleNview(0);
060
061  //预加载所有子页面
062  for(var i = 0, len = subpages.length; i < len; i++) {
063  if(!plus.webview.getWebviewById(subpages[i].id)) {
064  var sub = plus.webview.create(subpages[i].url, subpages[i].id, subpage_style);
065  //初始化隐藏
066  sub.hide();
067  // append到当前父webview
068  self.append(sub);
069  }
070  }
071
072  //初始化显示第一个子页面
073  plus.webview.show(plus.webview.getWebviewById(subpages[0].id));
074
075  },
076  /**
077   * 点击切换tab窗口
078   */
079  changeSubpage: function(targetPage, activePage, aniShow) {
080  //若为iOS平台或非首次显示，则直接显示
081  if(mui.os.ios || aniShow[targetPage]) {
082  plus.webview.show(targetPage);
083  } else {
084  //否则，使用fade-in动画，且保存变量
085  var temp = {};
086  temp[targetPage] = "true";
087  mui.extend(aniShow, temp);
088  plus.webview.show(targetPage, "fade-in", 300);
089  }
090  //隐藏当前 除了第一个父窗口
091  if(activePage !== plus.webview.getLaunchWebview()) {
092  plus.webview.hide(activePage);
093  }
094  },
095  /**
096   * 点击重绘底部tab （view控件）
097   */
098  toggleNview: function(currIndex) {
099  // 重绘当前tag 包括icon和text，所以执行两个重绘操作
100  switch(currIndex){
101  case 0 :
102  util.updateSubNView(0, util.options.ACTIVE_SRC1);
103  util.updateSubNView(1, util.options.NORMAL_SRC2);
104  util.updateSubNView(2, util.options.NORMAL_SRC3);
105  util.updateSubNView(3, util.options.NORMAL_SRC4);
106  break;
107  case 1 :
108  util.updateSubNView(0, util.options.NORMAL_SRC1);
109  util.updateSubNView(1, util.options.ACTIVE_SRC2);
110  util.updateSubNView(2, util.options.NORMAL_SRC3);
111  util.updateSubNView(3, util.options.NORMAL_SRC4);
112  break;
113  case 2 :
114  util.updateSubNView(0, util.options.NORMAL_SRC1);
115  util.updateSubNView(1, util.options.NORMAL_SRC2);
116  util.updateSubNView(2, util.options.ACTIVE_SRC3);
117  util.updateSubNView(3, util.options.NORMAL_SRC4);
118  break;
119  case 3 :
120  util.updateSubNView(0, util.options.NORMAL_SRC1);
121  util.updateSubNView(1, util.options.NORMAL_SRC2);
122  util.updateSubNView(2, util.options.NORMAL_SRC3);
123  util.updateSubNView(3, util.options.ACTIVE_SRC4);
124  break;
125  }
126  },
127  /*
128   * 利用 plus.nativeObj.View 提供的 drawBitmap 方法更新 view 控件
129   */
130  updateSubNView: function(currIndex, src) {
131  var self = plus.webview.currentWebview(),
132  nviewEvent = plus.nativeObj.View.getViewById("tabBar"), // 获取nview控件对象
133  nviewObj = self.getStyle().subNViews[0], // 获取nview对象的属性
134  currTag = nviewObj.tags[currIndex]; // 获取当前需重绘的tag
135  nviewEvent.drawBitmap(src,'',currTag.position, currTag.id);
136  }
137 };

3、index.html代码修改如下(主要将中间凸起的效果有原来的字体图标改成了图片)：

001
002 <html>
003 <head>
004 <meta charset="UTF-8">
005 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
006 <title>首页title>
007 <script src="js/mui.min.js">script>
008 <link href="css/mui.min.css" rel="stylesheet" />
009 <style>
010 html,
011 body {
012  background-color: #efeff4;
013 }
014
015 .title {
016  margin: 20px 15px 10px;
017  color: #6d6d72;
018  font-size: 15px;
019  padding-bottom: 51px;
020 }
021 style>
022 head>
023
024 <body>
025  <script src="js/util.js">script>
026  <script type="text/javascript">
027  (function() {
028  mui.init({
029  swipeBack: true //启用右滑关闭功能
030  });
031  mui.plusReady(function() {
032  var self = plus.webview.currentWebview(),
033  leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中
034  /**
035   * drawNativeIcon 绘制凸起圆，
036   * 实现原理：
037   *   id为bg的tag 创建带边框的圆
038   *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
039   *   id为iconBg的红色背景图
040   *   id为icon的字体图标
041   *   注意创建先后顺序，创建越晚的层级越高
042   */
043  var drawNativeIcon = util.drawNative('icon', {
044  bottom: '5px',
045  left: leftPos + 'px',
046  width: '60px',
047  height: '60px'
048  }, [{
049  tag: 'rect',
050  id: 'bg',
051  position: {
052  top: '1px',
053  left: '0px',
054  width: '100%',
055  height: '100%'
056  },
057  rectStyles: {
058  color: '#fff',
059  radius: '50%',
060  borderColor: '#ccc',
061  borderWidth: '1px'
062  }
063  }, {
064  tag: 'rect',
065  id: 'bg2',
066  position: {
067  bottom: '-0.5px',
068  left: '0px',
069  width: '100%',
070  height: '45px'
071  },
072  rectStyles: {
073  color: '#fff'
074  }
075  }, {
076  tag: 'rect',
077  id: 'iconBg',
078  position: {
079  top: '5px',
080  left: '5px',
081  width: '50px',
082  height: '50px'
083  },
084  rectStyles: {
085  color: '#0ab88e',
086  radius: '50%'
087  }
088  },{
089  tag: 'img',
090  id: 'icon',
091  position: {
092  top: '15px',
093  left: '15px',
094  width: '30px',
095  height: '30px'
096  },
097  src: 'images/icon_scan.png'
098  }]);
099  // 将绘制的凸起 append 到父webview中
100  self.append(drawNativeIcon);
101
102
103  //凸起圆的点击事件
104  var active_color = '#fff';
105  drawNativeIcon.addEventListener('click', function(e) {
106  mui.openWindow({
107  id : 'scan',
108  url : 'pages/scan.html'
109  })
110  });
111  // 中间凸起图标绘制及监听点击 完毕
112
113  // 创建子webview窗口 并初始化
114  var aniShow = {};
115  util.initSubpage(aniShow);
116
117  //初始化相关参数
118  var nview = plus.nativeObj.View.getViewById('tabBar'),
119  activePage = plus.webview.currentWebview(),
120  targetPage,
121  subpages = util.options.subpages,
122  pageW = window.innerWidth,
123  currIndex = 0;
124
125  /**
126   * 根据判断view控件点击位置判断切换的tab
127   */
128  nview.addEventListener('click', function(e) {
129  var clientX = e.clientX;
130  if(clientX >= 0 && clientX <= parseInt(pageW * 0.25)) {
131  currIndex = 0;
132  } else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
133  currIndex = 1;
134  } else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
135  currIndex = 2;
136  } else {
137  currIndex = 3;
138  }
139  // 匹配对应tab窗口
140  if(plus.webview.getWebviewById(subpages[currIndex].id) ==  plus.webview.currentWebview()){
141  return;
142  }else{
143  targetPage = plus.webview.getWebviewById(subpages[currIndex].id);
144  }
145
146  //底部选项卡切换
147  util.toggleNview(currIndex);
148  // 子页面切换
149  util.changeSubpage(targetPage, activePage, aniShow);
150  //更新当前活跃的页面
151  activePage = targetPage;
152
153  });
154  });
155  })();
156  script>
157 body>
158 html>

下面是源码下载：

nativeTab_5imoban

注：代码注释非常详细，可以对比着官方demo进行修改，也可以直接使用我爱模板网修改的demo，将图片替换即可。