前  言

         

　MUI是一款最接近原生APP体验的高性能前端框架，它的比较重要的功能是：下拉刷新、侧滑导航、滑动触发操作菜单和顶部(底部)选项卡等

最近用MUI做手机app应用的时候，遇到的小bug。顺便研究了一下这个tab-top-webview-main，这里给大家分享一下。

1主页代码

<!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: #CCCCCC;

            }

        </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>

2子页代码

<!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>

3代码解释

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=""属性需要设置为对应子页选项卡路径。

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

                            推荐

</a>

　　2、这里，new webviewGroup("tab-top-webview-main.html",{})  第一个参数需要传入一个页面的id。需要注意的是，这个页面id 就是我们包含顶部选项卡的页面，也就是当前我们这段js所在的页面

new webviewGroup("tab-top-webview-main.html", {}

　　3、 items数组中传入的是子页对应选项卡该导入的子页面的id，有几个子页就添加几个子页，中间用逗号分隔

　　

　　大家如果还有别的需求，可以去MUI网站上查找帮助文档  http://dev.dcloud.net.cn/mui/，还有很多小功能，我会陆续更新的~~~

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

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

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

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

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

  3. 顶部选项卡-可左右拖动(webview)示例如何做到tab与webview联动滚动

    顶部选项卡-可左右拖动(webview)的示例中,如何做到tab与webview联动滚动,效果类似uc头条一样 ps:自己也不确定有多少了到航头,页面怎么办,到航头从后台获取,页面不可能建N多个.ht ...

  4. mui 登录跳转到首页之后顶部选项卡不灵敏问题

    前段时间开发一个用mui开发app的时候遇到了登录跳转到首页之后顶部选项卡会失灵的问题,多次尝试之后终于解决了,趁现在还有点印象记录一下吧. 一开始我是用mui.openWindow来新开首页的,出了 ...

  5. TabTopLayout【自定义顶部选项卡区域（固定宽度且居中）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡并居中显示.结合显示/隐藏view的方式实现切换功能(正常情况下可能是切换fragment). 效果图 代码分析 T ...

  6. TabTopUnderLineLayout【自定义顶部选项卡（带下划线）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线样式的效果. 备注:如果配合Fragment的话,MainActivit ...

  7. TabTopAutoLayout【自定义顶部选项卡区域（带下划线）（动态选项卡数据且可滑动）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果 ...

  8. Android TabHost的使用 顶部选项卡

    用TabHost 来实现顶部选项卡,上代码:activity_main.xml <?xml version="1.0" encoding="utf-8"? ...

  9. web 前端 常见操作 将时间戳转成日期格式 字符串截取 使用mui制作选项卡

    1.将时间戳转成日期格式: //第一种 function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString( ...

随机推荐

  1. Java 随笔记录

    1. java对象转json Message msg = generateMessage();ObjectMapper mapper = new ObjectMapper();String json ...

  2. JSON取值(key是中文或者数字)方式详解

    JSON取值(key是中文或者数字)方式详解 先准备一个json对象用于演示 var json = {'name':'zhangsan', '年龄':23, 404:'你可能迷路了'}; 使用JS中w ...

  3. C#多线程的用法7-线程间的协作ManualResetEvent

    ManualResetEvent:手动重置事件,它用于线程间同步时用法非常简单也易于理解. private static void MultiThreadSynergicWithManualReset ...

  4. spring mvc:Error scanning entry module-info.class from jar错误

    项目从jdk1.6升级到jdk1.8,启动的时候出现如下错误: java.lang.RuntimeException: Error scanning entry module-info.class f ...

  5. 把JavaScript代码改成ES6语法不完全指南

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...

  6. node.js的fs核心模块读写文件操作 -----由浅入深

    node.js 里fs模块 常用的功能 实现文件的读写 目录的操作 - 同步和异步共存 ,有异步不用同步 - fs.readFile 都不能读取比运行内存大的文件,如果文件偏大也不会使用readFil ...

  7. Apache2 httpd.conf 配置详解(一)

    常用配置指令说明 ServerRoot:服务器的基础目录,一般来说它将包含conf/和logs/子目录,其它配置文件的相对路径即基于此目录.默认为安装目录,不需更改. 语法:ServerRoot di ...

  8. Maven setting.xml 文件剖析

    全局配置: ${M2_HOME}/conf/settings.xml (配置环境变量  新建 M2_HOME    安装目录到版本名那里(D:\apache-maven-3.0.2) 编辑path 环 ...

  9. [转]Java中的随机数生成器：Random，ThreadLocalRandom，SecureRandom

     详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp84 Random即:java.util.Random, ThreadL ...

  10. 小程序脚本语言WXS详解

    WXS脚本语言是 Weixin Script脚本的简称,是JS.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. 解构小程序的几种方式,其中一种方式就 ...