首页 > 移动平台 > 详细

体验使用MUI上手练习app页面开发

时间:2019-07-23 10:30:35      阅读:120      评论:0      收藏:0      [点我收藏+]

因为公司安排需要先学习一点app开发,而安排学习的框架就是MUI,上手两天体验还算可以(来自后端人员的懵逼),靠着MUI的快捷键可以快速的完成自己想要的样式模板,更多的交互性的内容则需要使用js来完成。

技术分享图片

这就是mH就可以完成的内容(做个记录),快捷键实在有点多。不得不说HBuilder是真的好用呀,体验感贼好,前端运行起来也是很快,直接启动链接模拟器就ok了,舒服。

开发文档对于新人来说还是有点难度,看了小半上午对于js在MUI中的运用还是云里雾里,不过自己js确实很菜。最后简单实现了一下CSDN上的 的项目

 技术分享图片技术分享图片

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部分在底部导航栏的使用就是这部分的代码,不过还有其他的使用底部导航栏的方法,今后还继续在官方文档上进行了解和学习。

欢迎大佬们指正,谢谢。

 

体验使用MUI上手练习app页面开发

原文:https://www.cnblogs.com/lrz007/p/11229789.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!