前  言

         

　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. 【JCP模式实战--ferrous-framework】ferrous前端开发框架邀您初体验

    一.简介 ferrous-framework是为了迎合微服务架构而封装的纯前端开发框架. 实现了一种介于单页面和多页面的开发模式,让大家根据自己的需要对单页面和多页面进行切换或者共存. 页面结构采用J ...

  2. 浅谈如何用Java操作MongoDB

    NoSQL数据库因其可扩展性使其变得越来越流行,利用NoSQL数据库可以给你带来更多的好处,MongoDB是一个用C++编写的可度可扩展性的开源NoSQL数据库.本文主要讲述如何使用Java操作Mon ...

  3. 垃圾收集器Serial 、Parallel、CMS、G1

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt378 这里介绍4个垃圾收集器,如果进行了错误的选择将会大大的影响程序的性能. ...

  4. android-学习1 配置环境

    转载注明出处,谢谢--http://www.cnblogs.com/JK-HYJ/ 前提:电脑先配置好java的环境-- adk_bundle下载安装地址:http://tools.android-s ...

  5. python--对配置文件进行搜索，增加新的内容

    要求: 文件haproxy1.查 输入:www.oldboy.org 获取当前backend下的所有记录2.新建 输入: arg = {'backend': 'www.oldboy.org','rec ...

  6. java四则运算

    题目描述: 从<构建之法>第一章的 "程序" 例子出发,像阿超那样,花二十分钟写一个能自动生成小学四则运算题目的命令行 "软件",满足以下需求: 除 ...

  7. 201521123104 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1. clone方法 1.1 Object ...

  8. 201521123101 《Java程序设计》第1周学习总结

    1. 本周学习总结 在学习Java之前要做好准备工作,了解Java从研发后开始如何一步步完善,其与C++.C语言的异同,然后下载JDK.Eclipse.Notepad等软件,以便于未来的学习. 2. ...

  9. JAVA课程设计个人博客 学生成绩管理 201521123023 戴建钊

    1. 团队课程设计博客链接 http://www.cnblogs.com/kawajiang/p/7062407.html 2.个人负责模块或任务说明 我主要负责实现随机生成10万个学生及其姓名.学号 ...

  10. java: Java中this和super的用法总结

    this this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. this的用法在java中大体可以分为3种: 1.普通的直接引用 这种就不用讲了,this相当于是指向当前对象本 ...