【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.修改未读消息状态即可