MUI badge在项目中的实际应用(更新/删除)

 【1、 背景介绍 】

1、此项目共有五个tab选项,badge用于的是消息模块
2、实现效果：
     1.软件打开时：消息图标上显示未读消息的数量
           情况1：未读数量大于0   ---->  显示
           情况2：未读数量小于0   ---->  隐藏badge

     2.点击消息模块时： 隐藏badge

     3.点击其他模块时： 从数据库重新取得未读消息的数据,并更新badge的值
           情况1：未读数量大于0   ---->  显示
           情况2：未读数量小于0   ---->  隐藏badge

 【2、 代码实现 】

   1、首页代码

        mui.back = function() {
		plus.webview.currentWebview().hide("auto", 300); //隐藏当前页面，这里300是隐藏页面的动画时间，单位毫秒，可自定义
        }

        //mui初始化
        mui.init();
        var subpages = ['home.html', 'examples/order/order.html', 'examples/car/cars.html', 'examples/news/new_main.html', 'examples/my/mysetting.html'];
          var subpage_style = {
		  top: '0px',
		  bottom: '51px'
        };

		var aniShow = {};

		mui.plusReady(function() {
			mui.ajax(url', { // 从后台查询到未读消息的数量
				data: {},
				dataType: 'html',
				type: 'post',
				success: function(data) {
                    
					if(data.length > 0) {// 判断是否有未读消息
                       
						var address_list = eval('(' + data + ')'); // 由于后台传来的格式是html 需要解析
						plusReady(address_list.length);
					} else {
						plusReady(0);
					}
				}
			});

		})

		//创建子页面，首个选项卡页面显示，其它均隐藏；
		function plusReady(size) {

			
			var Yc_Order = localStorage.getItem("Yc_Order");// 订单
			
			var Yc_Message = localStorage.getItem("Yc_Message");// 购物车
			
			var Yc_My = localStorage.getItem("Yc_My");// 我的

			var html = "";
           
			if(true) { // 根据登录时的权限 决定是否显示此tab
				html = html + '<a id="defaultTab" class="mui-tab-item mui-active" href="home.html"><span class="mui-icon mui-icon-home"></span>';
				html = html + '<span class="mui-tab-label">首页</span></a>';
			}
			if(Yc_Order == "true") {
				html = html + '<a class="mui-tab-item " href="examples/order/order.html"><span class="mui-icon mui-icon-arrowup"></span>';
				html = html + '<span class="mui-tab-label">订单</span></a>';
				html = html + '<a class="mui-tab-item " href="examples/car/cars.html"><span class="mui-icon iconfont icon-03"></span>';
				html = html + '<span class="mui-tab-label">购物车</span></a>';
			}
           
			if(Yc_Message == "true") { // 消息模块的处理
				html = html + '<a class="mui-tab-item " href="examples/news/new_main.html"><span class="mui-icon mui-icon-chatbubble">';
				
                if(size != "" && size != null) {
					html = html + '<span class="mui-badge" id="badge">' + size + '</span>';
				}// 当从后台查到的size不为空时 显示
				html = html + '</span>';
				html = html + '<span class="mui-tab-label">消息</span></a>';
			}
			if(true) {
				html = html + '<a class="mui-tab-item" href="examples/my/mysetting.html"><span class="mui-icon mui-icon-contact"></span>';
				html = html + '<span class="mui-tab-label">我的</span></a>';
			}

			document.querySelector('#muiscroll').innerHTML = html;

			var self = plus.webview.currentWebview();
			for(var i = 0; i < 5; i++) {
				var temp = {};
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
				if(i > 0) {
					sub.hide();
				} else {
					temp[subpages[i]] = "true";
					mui.extend(aniShow, temp);
				}

				self.append(sub);
			}
		}

	
		var activeTab = subpages[0];
		var title = document.getElementById("title");
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
           
			if(targetTab == "examples/news/new_main.html") { // 判断用户是否点击消息模块
                
				var badge = document.getElementById("badge");// 得到 badge 对象
               
				if(badge != null) { // 判断此对象是否存在 存在 则隐藏
					document.getElementById("badge").style.display = "none";
				}
			} else {
				var badge = document.getElementById("badge"); // 当点击其他tab时 同样 需先得到 badge 对象
                
				if(badge != null) {// 判断此对象是否存在 存在 则更新
					mui.ajax(url, {
						data: {},
						dataType: 'html',
						type: 'post',
						success: function(data) {
							if(data.length > 0) {
								var address_list = eval('(' + data + ')');
								document.getElementById("badge").style.display = "block";// 将badge修改为显示
								document.getElementById("badge").innerHTML = address_list.length;// 并更新上方的数字
							}

						}
					});
				}

			}
			......
	</script>

</html>

2、消息页面(无处理 badge 的代码)

    1.修改未读消息状态即可