最近用MUI做手机app的时候，遇到了一点问题。然后就对这个tab-top-webview-main的源码做了点研究，接下来我将和大家详解一下

tab-top-webview-main的用法和应该注意的方法。

　　接下来先发一个应用的实例：

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <link href="css/mui.min.css" rel="stylesheet" />

        <style type="text/css">

            .d1{

                width: 100%;

                height: 50px;

                text-align: center;

                line-height: 50px;

                background-color: #007AFF;

            }

        </style>

    </head>

    <body>

        <div class="d1">我是div1,下面是插入的子页面</div>  <!--我们将在这个div下边插入子页面-->

    </body>

    <script src="js/mui.min.js"></script>

    <script type="text/javascript">

        mui.init({

            subpages:[{                //下边是初始化，然后这个页面显示我们将插入的页面

                url:"tab-top-webview-main.html",

                id:"tab-top-webview-main.html",

                styles:{

                    top:"50px",

                    bottom:"0px"

                }

            }]

        })

    </script>

</html>

　　

　　然后下边是我们子页的代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Hello MUI</title>

        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="css/mui.min.css">

    </head>

    <body>

        <div class="mui-content">

            <div id="slider" class="mui-slider mui-fullscreen">

                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">

                    <div class="mui-scroll">

                        <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">

                            推荐

                        </a>

                        <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">

                            热点

                        </a>

                    </div>

                </div>

            </div>

        </div>

        <script src="js/mui.min.js"></script>

        <script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>

        <script>

            mui.init();

            mui.plusReady(function() {

                var group = new webviewGroup("tab-top-webview-main.html", {

                    items: [{

                        id: "tab-top-subpage-1.html",   //这是子页1的路径

                        url: "tab-top-subpage-1.html",

                        extras: {}

                    }, {

                        id: "tab-top-subpage-2.html",    //这是子页2的路径

                        url: "tab-top-subpage-2.html",

                        extras: {}

                    }],

                    onChange: function(obj) {

                        var c = document.querySelector(".mui-control-item.mui-active");

                        if(c) {

                            c.classList.remove("mui-active");

                        }

                        document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");

                    }

                });

                mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {

                    var wid = this.getAttribute("data-wid");

                    group.switchTab(wid);

                });

            });

            mui.back = function() {

                var _self = plus.webview.currentWebview();

                _self.close("auto");

            }

        </script>

    </body>

</html>

然后以下就是我们代码的效果图：

　　现在我们解释一下这个代码，在强调一下该注意的地方。

　　

var group = new webviewGroup("tab-top-webview-main.html", {

    items: [{

        id: "tab-top-subpage-1.html",   //这是子页1的路径

        url: "tab-top-subpage-1.html",

        extras: {}

        }, {

            id: "tab-top-subpage-2.html",    //这是子页2的路径

            url: "tab-top-subpage-2.html",

            extras: {}

        }]

    })

　　1.注意，选项卡超链接a的data-wid=""属性需要设置为对应子页选项卡路径

　　2. 这里，new webviewGroup("tab-top-webview-main.html","")  第一个参数需要传入一个页面的id。特别强调，这个页面id 就是我们包含顶部选项卡的页面，也就是当前我们这段js所在的页面，千万别写错了。   ps：很多朋友没出来结果，私聊问我原因，所以在这里再强调一下。

　　3. items数组中传入的是子页对应选项卡该导入的子页面的id。

　　4. 还有，这是MUI，做手机app、手机页面的，电脑浏览器对 插入视图 是不显示的，所以大家要在手机上测试。   (╥╯^╰╥)，好多朋友在电脑上出不来结果，问我原因，在这也一并说了。

　　

　　注意，这个子页的插入虽然现实在主页面，但是他的代码内容是不属于主页面的，在body中无法选中它。

　　

　　

详解MUI顶部选项卡(tab-top-webview-main)的用法的更多相关文章

  1. mui 顶部选项卡的两种切换方式

    mui 顶部选项卡的两种切换方式 第一种main页面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  2. 一文详解 Linux 系统常用监控工一文详解 Linux 系统常用监控工具(top,htop,iotop,iftop)具(top,htop,iotop,iftop)

    一文详解 Linux 系统常用监控工具(top,htop,iotop,iftop)     概 述 本文主要记录一下 Linux 系统上一些常用的系统监控工具,非常好用.正所谓磨刀不误砍柴工,花点时间 ...

  3. MUI顶部选项卡的用法(tab-top-webview-main)

      前  言           MUI是一款最接近原生APP体验的高性能前端框架,它的比较重要的功能是:下拉刷新.侧滑导航.滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候 ...

  4. 【Java学习笔记之三十三】详解Java中try，catch，finally的用法及分析

    这一篇我们将会介绍java中try,catch,finally的用法 以下先给出try,catch用法: try { //需要被检测的异常代码 } catch(Exception e) { //异常处 ...

  5. 详解Python中内置的NotImplemented类型的用法

    它是什么? ? 1 2 >>> type(NotImplemented) <type 'NotImplementedType'> NotImplemented 是Pyth ...

  6. 一文详解 Linux 系统常用监控工具(top,htop,iotop,iftop)

      概 述 本文主要记录一下 Linux 系统上一些常用的系统监控工具,非常好用.正所谓磨刀不误砍柴工,花点时间总结一下是值得的! 本文内容脑图如下: top 命令 top 命令我想大家都挺熟悉吧! ...

  7. 【转载】[ORACLE]详解not in与not exists的区别与用法

    在网上搜了下关于oracle中not exists和not in性能的比较,发现没有描述的太全面的,可能是问题太简单了,达人们都不屑于解释吧.于是自己花了点时间,试图把这个问题简单描述清楚,其实归根结 ...

  8. 详解Java的Spring框架中的注解的用法

    转载:http://www.jb51.net/article/75460.htm 1. 使用Spring注解来注入属性 1.1. 使用注解以前我们是怎样注入属性的 类的实现: class UserMa ...

  9. Redis详解（三）------ redis的五大数据类型详细用法

    我们说 Redis 相对于 Memcache 等其他的缓存产品,有一个比较明显的优势就是 Redis 不仅仅支持简单的key-value类型的数据,同时还提供list,set,zset,hash等数据 ...

随机推荐

  1. android decorView详解

    摘要 一.DecorView为整个Window界面的最顶层View. 二.DecorView只有一个子元素为LinearLayout.代表整个Window界面,包含通知栏,标题栏,内容显示栏三块区域. ...

  2. leetcode之旅（9）-Reverse Linked List

    题目描述: Reverse a singly linked list. click to show more hints. Hint: A linked list can be reversed ei ...

  3. leetcode之旅（7）-Move Zeroes

    Move Zeroes 题目描述: Given an array nums, write a function to move all 0's to the end of it while maint ...

  4. 创建Sencha touch第一个应用

    最近学习Sencha touch ,是一个菜鸟级别.废话不多说,让我们来创建Sencha touch的第一应用. 首先,我们下载Sencha touch2.0 sdk 和SDK工具.  SDK工具直接 ...

  5. 学习MQ（三） 一个实例

    学习MQ(三) 一个实例. 现在有两台机器A和B,分别安装了MQ6.0,我要通过MQ进行A和B之间的双向通信. 我打算分两步,第一步:实现A到B的数据传输. 在A上: 1.创建队列管理器 QM_100 ...

  6. 讲解Oracle面试过程中常见的二十个问题

    1.冷备份和热备份的不同点以及各自的优点     解答:热备份针对归档模式的数据库,在数据库仍旧处于工作状态时进行备份.而冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库.热备份的优点在于当备 ...

  7. Android框架之Volley与Glide

    PS:在看到这个题目的同时,你们估计会想,Volley与Glide怎么拿来一块说呢,他们虽然不是一个框架,但有着相同功能,那就是图片处理方面.首先我们先来看一下什么volley,又什么是glide. ...

  8. SpringBoot配置拦截器

    [配置步骤] 1.为类添加注解@Configuration,配置拦截器 2.继承WebMvcConfigurerAdapter类 3.重写addInterceptors方法,添加需要拦截的请求 @Co ...

  9. orderBy新写法

    通常,我们处理排序规则的处理方法是在sql 语句中order by create_time desc, 但是这时我们需要从控制器中一步步找到该方法,操作多. 我们试着将业务逻辑拆分到控制器 中, 把排 ...

  10. linux小实验-考勤模拟程序

    任务: 设计一个考勤模拟程序,实现如下功能选择界面,要求使用函数 1.上班签到 2.下班签出 3.缺勤信息查阅 4.退出 考勤程序运行后,提示用户输入上述功能选择,并验证用户输入的用户名和密码:用户信 ...