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


Posted in Javascript onOctober 08, 2017

前  言 

 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="external nofollow" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" >
  </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" rel="external nofollow" rel="external nofollow" data-wid="tab-top-subpage-1.html">
              推荐
            </a>
            <a class="mui-control-item" href="#item2mobile" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" 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)详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery中获取select选中值的代码
Jun 27 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 #Javascript
JS实现简单表格排序操作示例
Oct 07 #Javascript
javascript数组定义的几种方法
Oct 06 #Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 #Javascript
node.js中http模块和url模块的简单介绍
Oct 06 #Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 #Javascript
vue-cli构建项目使用 less的方法
Oct 04 #Javascript
You might like
php5.2时间相差8小时
2007/01/15 PHP
php修改时间格式的代码
2011/05/29 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
浅析Jquery操作select
2016/12/13 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
化工专业应届生求职信
2013/11/08 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
小学语文国培感言
2014/03/04 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
岗位聘任协议书
2015/09/21 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript