The bottom navigation bar should be the most commonly used display mode of mainstream apps. I personally think the bottom navigation bar is the most clear and intuitive, generally 4-5 is the best way. Here I made a little thing, that is, when I click a tab, it automatically highlights and changes the icon, so that the overall feeling is very dynamic. For example, the information tab is a closed envelope when I don't click, and it becomes an open envelope at one point. What I want is this effect. Here we mainly use the following things: the bottom tab, the external icon reference, and the icon automatic transformation. See the code and comments. The above are nonsense. I write general things directly in the comments, which is more intuitive.
//html part, the bottom five tabs, public icon style, which is my own css, set some icon styles,
//Because in MUI development, both the icon with its own and the icon with external references are processed in font style, such as color, color,
//Size, font size. If it is very simple to refer to the icon, there are two CSS directly: Mui icon and specific icon name, but sometimes
//Wait for some special business requirements, such as you can't find the icon you need, for example, you want to realize the dynamic switching of two state icons like me, then
//You can only use external icons. It's very simple. Baidu search: Alibaba vector map, or directly input iconcont.cn/home,
//Register, search for the icon you need, and then download the source code. At this time, extract. We need two files, one is the iconcont.ttf file
//It is the font standard file of icon, which is placed under our font folder. There is also an icon.css file, which we downloaded
//icon style file, which is placed under the css folder, contains a code url('../fonts/iconfont.ttf?t=1533048640652')
// format('truetype '), the address is changed to the font folder just now. In fact, you do a project and directly build a project on the alivector website
//Every time I find an icon, I directly add it to the shopping cart, and then download the source code, so that every time I download a good file, I can decompress and overwrite it
<nav class="mui-bar mui-bar-tab public-white-bg">
<a id="defaultTab" class="mui-tab-item mui-active" href="html/home.html">
<span class="mui-icon iconfont icon-shouye2 public-icon-style" id="home"></span>
<span class="mui-tab-label public-icon-style" id="hometa">home page</span>
</a>
<a class="mui-tab-item" href="html/message.html">
<span class="mui-icon iconfont icon-icon-xinfeng" id="message"><span style="display: none;" class="mui-badge" >1</span></span>
<span class="mui-tab-label" id="messageta">information</span>
</a>
<a class="mui-tab-item" href="html/bigdata.html">
<span class="mui-icon iconfont icon-data" id="bigdata"></span>
<span class="mui-tab-label" id="bigdatata">Big data</span>
</a>
<a class="mui-tab-item" href="html/find.html">
<span class="mui-icon iconfont icon-pengyouquan" id="find"></span>
<span class="mui-tab-label" id="findta">find</span>
</a>
<a class="mui-tab-item" href="html/know.html">
<span class="mui-icon iconfont icon-iconxuexi" id="know"></span>
<span class="mui-tab-label" id="knowta">know</span>
</a>
</nav>
//Part script
//mui initialization
mui.init();
//My five subpages
var subpages = ['html/home.html', 'html/message.html', 'html/bigdata.html','html/find.html','html/know.html'];
var subpage_style = {
top:'0px',
bottom: '51px'
};
var aniShow = {};
//Create a sub page, the first tab page is displayed, others are hidden;
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for (var i = 0; i < subpages.length; 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);
}
});
//Currently active options
var activeTab = subpages[0];
//Tab click event
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//Show target tab
//Replace the icon of the target tab
changeIcon(targetTab);
//In case of iOS platform or non first time display, display directly
if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab);
}else{
//Otherwise, use the fade in animation and save the variables
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",300);
}
//Hide the current;
plus.webview.hide(activeTab);
//Change the currently active tab
activeTab = targetTab;
});
//User defined events, which can be called directly when necessary by clicking "Home tab" in simulation
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//Simulation homepage Click
mui.trigger(defaultTab, 'tap');
//Toggle tab highlight
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
//console.log(current);
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
//Click the bottom tab to replace the icon icon
function changeIcon(targetTab){
var home = document.getElementById('home');
var message = document.getElementById('message');
var bigdata = document.getElementById('bigdata');
var find = document.getElementById('find');
var know = document.getElementById('know');
var hometa = document.getElementById('hometa');
var messageta = document.getElementById('messageta');
var bigdatata = document.getElementById('bigdatata');
var findta = document.getElementById('findta');
var knowta = document.getElementById('knowta');
if(targetTab=='html/home.html'){
home.classList.remove('icon-shouye');
home.classList.add('icon-shouye2');
home.classList.add('public-icon-style');
hometa.classList.add('public-icon-style');
message.classList.remove('icon-icon-xinfeng2');
message.classList.add('icon-icon-xinfeng');
message.classList.remove('public-icon-style');
messageta.classList.remove('public-icon-style');
bigdata.classList.remove('public-icon-style');
bigdatata.classList.remove('public-icon-style');
find.classList.remove('public-icon-style');
findta.classList.remove('public-icon-style');
know.classList.remove('public-icon-style');
knowta.classList.remove('public-icon-style');
bigdata.classList.remove('icon-data2');
bigdata.classList.add('icon-data');
find.classList.remove('icon-pengyouquan2');
find.classList.add('icon-pengyouquan');
know.classList.remove('icon-iconxuexi2');
know.classList.add('icon-iconxuexi');
}else if(targetTab=='html/message.html'){
message.classList.remove('icon-icon-xinfeng');
message.classList.add('icon-icon-xinfeng2');
message.classList.add('public-icon-style');
messageta.classList.add('public-icon-style');
bigdata.classList.remove('public-icon-style');
bigdatata.classList.remove('public-icon-style');
find.classList.remove('public-icon-style');
findta.classList.remove('public-icon-style');
know.classList.remove('public-icon-style');
knowta.classList.remove('public-icon-style');
home.classList.remove('public-icon-style');
hometa.classList.remove('public-icon-style');
home.classList.remove('icon-shouye2');
home.classList.add('icon-shouye');
bigdata.classList.remove('icon-data2');
bigdata.classList.add('icon-data');
find.classList.remove('icon-pengyouquan2');
find.classList.add('icon-pengyouquan');
know.classList.remove('icon-iconxuexi2');
know.classList.add('icon-iconxuexi');
}else if(targetTab=='html/bigdata.html'){
bigdata.classList.remove('icon-data');
bigdata.classList.add('icon-data2');
bigdata.classList.add('public-icon-style');
bigdatata.classList.add('public-icon-style');
home.classList.remove('icon-shouye2');
home.classList.add('icon-shouye');
message.classList.remove('icon-icon-xinfeng2');
message.classList.add('icon-icon-xinfeng');
find.classList.remove('icon-pengyouquan2');
find.classList.add('icon-pengyouquan');
know.classList.remove('icon-iconxuexi2');
know.classList.add('icon-iconxuexi');
message.classList.remove('public-icon-style');
messageta.classList.remove('public-icon-style');
home.classList.remove('public-icon-style');
hometa.classList.remove('public-icon-style');
find.classList.remove('public-icon-style');
findta.classList.remove('public-icon-style');
know.classList.remove('public-icon-style');
knowta.classList.remove('public-icon-style');
}else if(targetTab=='html/find.html'){
find.classList.remove('icon-pengyouquan');
find.classList.add('icon-pengyouquan2');
find.classList.add('public-icon-style');
findta.classList.add('public-icon-style');
home.classList.remove('icon-shouye2');
home.classList.add('icon-shouye');
message.classList.remove('icon-icon-xinfeng2');
message.classList.add('icon-icon-xinfeng');
bigdata.classList.remove('icon-data2');
bigdata.classList.add('icon-data');
know.classList.remove('icon-iconxuexi2');
know.classList.add('icon-iconxuexi');
message.classList.remove('public-icon-style');
messageta.classList.remove('public-icon-style');
home.classList.remove('public-icon-style');
hometa.classList.remove('public-icon-style');
bigdata.classList.remove('public-icon-style');
bigdatata.classList.remove('public-icon-style');
know.classList.remove('public-icon-style');
knowta.classList.remove('public-icon-style');
}else if(targetTab=='html/know.html'){
know.classList.remove('icon-iconxuexi');
know.classList.add('icon-iconxuexi2');
know.classList.add('public-icon-style');
knowta.classList.add('public-icon-style');
home.classList.remove('icon-shouye2');
home.classList.add('icon-shouye');
message.classList.remove('icon-icon-xinfeng2');
message.classList.add('icon-icon-xinfeng');
bigdata.classList.remove('icon-data2');
bigdata.classList.add('icon-data');
find.classList.remove('icon-pengyouquan2');
find.classList.add('icon-pengyouquan');
message.classList.remove('public-icon-style');
messageta.classList.remove('public-icon-style');
home.classList.remove('public-icon-style');
hometa.classList.remove('public-icon-style');
bigdata.classList.remove('public-icon-style');
bigdatata.classList.remove('public-icon-style');
find.classList.remove('public-icon-style');
findta.classList.remove('public-icon-style');
}
}//In fact, the dynamic principle is very simple, that is, when you click a tab, you give it the original icon CSS to
//Delete it, and then add another icon CSS. In fact, we do the APP mainly by principle and page, as mentioned in the first article
//To do that kind of scaling effect, you can do it if you know the principle. It's not a magic thing, but you add the whole APP feeling
//It's dynamic. It's advanced. The background interaction of APP is not just that you transfer parameters, but that the background returns your data. It's so simple, and it's important
//It's HTML + CSS + JS + Mui (encapsulation framework), a little personal experience, you can see it
The code is left behind. Of course, I need several graphs to intuitively feel that it's the APP I'm working on. It's a little bit completed and recorded. I hope it can help people in need
You can see that my information tab is this kind of effect. If you don't click it, the envelope is closed. Open it as soon as you click it. Isn't it very interesting? Maybe you don't think it's useful. P ass it. It's just a personal preference. I hope the APP can move a little bit. OK, it's recorded here today.