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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
js简单实现交换Li的值
May 22 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
Bootstrap布局方式详解
May 27 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
JavaScript函数柯里化
Nov 07 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
PHP 数组入门教程小结
2009/05/20 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
javascript基础知识
2016/06/07 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
python 画条形图(柱状图)实例
2020/04/24 Python
详解Python中import机制
2020/09/11 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
大学生社会实践方案
2014/05/11 职场文书
数学系毕业生求职信
2014/05/29 职场文书
运动会口号16字
2014/06/07 职场文书
美化环境标语
2014/06/20 职场文书
师德承诺书2015
2015/04/28 职场文书