专栏首页前端之攻略MUI-tab两种实现方式 原

MUI-tab两种实现方式 原

底部选项卡tab有两种实现方式,一种是用js另一种是原生的

一、js实现方式:首先先建1个首页和几个子页,最后合并而成

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <!--ctrl+d删除空白行-->
    <link href="css/mui.min.css" rel="stylesheet" />
</head>

<body>
    <!--.mui-bar-nav~.mui-content这两个class之间的~什么意思?匹配 .mui-bar-nav 之后所有的 .mui-content(即同级的其他类或元素)。-->
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">首页</h1>
    </header>
    <div>content</div>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" href="html/home.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
        <a class="mui-tab-item" href="html/message.html">
				<span class="mui-icon mui-icon-chatboxes"></span>
				<span class="mui-tab-label">消息</span>
			</a>
        <a class="mui-tab-item" href="html/setting.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
    </nav>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    //设置默认打开首页显示的子叶序号
    var Index = 0;
    //把子页的路径写在数组中
    var subpages = ["html/home.html", "html/message.html", "html/setting.html"];
    mui.plusReady(function() {
        //获取当前页面所属的Webview窗口对象
        var self = plus.webview.currentWebview();
        for (var i = 0; i < subpages.length; i++) {
            //创建webview子页
            (function(i) {
                setTimeout(function() {
                    var wvs = plus.webview.all();
                    console.log(wvs.length);
                    var sub = plus.webview.create(
                        subpages[i], //子页url
                        subpages[i], //子页id
                        {
                            top: "45px",
                            bottom: "50px"
                        }
                    );
                    //如不是我们设置的默认子页则隐藏,否则添加到窗口中
                    if (i != Index) {
                        sub.hide();
                    }
                    //将webview对象填充到窗口,同一个self多次追加子页面,默认只显示最后创建追加的
                    self.append(sub);
                }, 3000)
            })(i)




        }
        //var wvs=plus.webview.all();
        //console.log(wvs.length);

    })
    //当前激活选项
    var activeTab = subpages[Index],
        title = document.querySelector(".mui-title");
    //选项卡点击事件
    mui('.mui-bar-tab').on('tap', 'a', function(e) {
        //获取目标子页的id
        var targetTab = this.getAttribute('href');
        if (targetTab == activeTab) {
            return;
        }
        //更换标题
        title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
        //显示目标选项卡
        plus.webview.show(targetTab);
        //隐藏当前选项卡
        plus.webview.hide(activeTab);
        //更改当前活跃的选项卡
        activeTab = targetTab;
    });
    </script>
</body>

</html>

二、另一种方式是原生方式,首先新建移动app,选择底部选项卡模板,会生成原生控件的底部选项卡模板

原生的模板我们经常需要修改成自己需要的

如果改成3个tab切换,修改步骤

1、manifest.json配置文件plus-launchwebview-subNViews中删除不需要的选项卡(文字与图标都是单独定位的,不是一组组的)

2、js里面的util.js   把i<8 改成 i<6

for(var i = 0; i < 8; i++) {             if(i !== currIndex && i !== currIndex + 1) {                 util.updateSubNView(i, util.options.NORMAL_COLOR);             }         }

3、根据判断view控件点击位置判断切换的tab修改成下面的,如果不需要下面的气泡,关于气泡的代码都删除 nview.addEventListener('click', function(e) {                         var clientX = e.clientX;                         if(clientX > 0 && clientX <= parseInt(pageW * 0.33)) {                             currIndex = 0;                         } else if(clientX > parseInt(pageW * 0.33) && clientX <= parseInt(pageW * 0.67)) {                             currIndex = 1;                         } else if(clientX > parseInt(pageW * 0.67)) {                             currIndex = 2;                         }                          // 匹配对应tab窗口                             if(currIndex > 0) {                             targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);                         } else {                             targetPage = plus.webview.currentWebview();                         }

                        if(targetPage == activePage) {                             return;                         }

                            //底部选项卡切换                             util.toggleNview(currIndex);                             // 子页面切换                             util.changeSubpage(targetPage, activePage, aniShow);                             //更新当前活跃的页面                             activePage = targetPage;                     });

Hbuilder生成的模板在列表跳转时在列表页面跳转时遇到下面2个错误 1、 Uncaught ReferenceError: open_detail is not defined at index.html:2 解决方法把js最外层的自执行函数删除 (function() { })();

2、Uncaught Error: webview[moive-detail] does not exist at js/mui.min.js:6 //预加载页面放到mui.plusReady(function() {}里面,plusReady上面var detailPage = null;                 detailPage = mui.preload({                     id: "moive-detail",                     url: "./html/moive_detail.html"                 });

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue 全局前置守卫引起死循环的原因与解决方法

    我们经常会用到全局前置守卫,如判断用户有没有登陆过,如果登陆过就直接跳到目的页面,如果没有登陆过,就跳转到登陆页。

    tianyawhl
  • 图片滑动-兼容手机与pc端 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 完整MUI 例子 原

    假如3个页面的例子,第一个是index.html,第二个html文件夹中建2个页面moive_detail.html,第三个演员详情页cast_detail.h...

    tianyawhl
  • MVC 通过Jquery获取视图中所有控件的值

    在使用MVC开发Web时,有需求要将页面所有控件及其值传递到客户端与预定义的界面字段配置进行匹配。

    aehyok
  • Re: 从零开始的程序设计竞赛(一)

    转载声明:本文来源于知乎专栏《Dai 的程序设计竞赛瞎扯自动机 》,已获得原作者Dai@NeverLand的允许,禁止二次转载。

    ACM算法日常
  • cssjshtml vue.js 路由独享守卫,组件守卫

    葫芦
  • android4.4zepto.tap偶尔需点击两次bug分析

    怎么复现这个问题 ? 1、首先随意的滑两次,每次滑长一些,不用滑重(碎屏就不好了~~) 2、再点击一次,之后立刻停住~ o, no 你肯定在我说停住之后再点了...

    IMWeb前端团队
  • android 4.4 zepto.tap 偶尔需点击两次 bug 分析

    android 4.4 zepto.tap 偶尔需点击两次 bug 分析,包括如何复现和解决过程。

    腾讯IVWEB团队
  • android4.4zepto.tap偶尔需点击两次bug分析

    长距离的滑动: touchstart - > touchmove(仅一次) -> touchcancel

    IMWeb前端团队
  • Java开发知识之Java中的泛型

      Java中,所有类的父类都是Object类.所以定义泛型的时候,设计长须的话传入的值与返回的值都是Object类型为主.如果是用具体的实例,就要进行转换了....

    IBinary

扫码关注云+社区

领取腾讯云代金券