Experience using MUI started practicing app page development

Because you need to learn a little company to arrange for app development, and learning framework arrangements that MUI, you can still experience started two days (from the backend staff ignorant force), relying on shortcuts MUI can quickly complete the style you want template, more interactive content you need to use js to complete.

This is mH can be completed content (to be recorded), the shortcut key is a bit much. HBuilder have to say it is really easy to use, ready to experience a sense of thieves, the front end is up and running fast, direct link to launch the simulator ok, comfortable.

Development documentation is a little more difficult for newcomers, looked less than half the morning to use js or foggy in the MUI, but really js own vegetables. Finally, a bit on the simple implementation CSDN  Shandong buns project

 

var subpages=["home.html","news.html","login.html"];
        var subpage_style={
            top:'45px',
            bottom:'51px'
        };  
        var aniShow = {};
                 
         //创建子页面，首个选项卡页面显示，其它均隐藏；
        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);
            }
        });
         //当前激活选项
        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 == activeTab) {
                return;
            }
            //更换标题
            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
            //显示目标选项卡
            //若为iOS平台或非首次显示，则直接显示
            if(mui.os.ios||aniShow[targetTab]){
                plus.webview.show(targetTab);
            }else{
                //否则，使用fade-in动画，且保存变量
                var temp = {};
                temp[targetTab] = "true";
                mui.extend(aniShow,temp);
                plus.webview.show(targetTab,"fade-in",300);
            }
            //隐藏当前;
            plus.webview.hide(activeTab);
            //更改当前活跃的选项卡
            activeTab = targetTab;
        });

js部分在底部导航栏的使用就是这部分的代码，不过还有其他的使用底部导航栏的方法，今后还继续在官方文档上进行了解和学习。

欢迎大佬们指正，谢谢。