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

前  言 

　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)详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

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

    前  言  MUI是一款最接近原生APP体验的高性能前端框架,它的比较重要的功能是:下拉刷新.侧滑导航.滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候,遇到的小bug.顺便研究了一下这个tab-top-webview-main,这里给大家分享一下. 1主页代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title

  • 正确在Flutter中添加webview实现详解

    目录 前言 安装 运行项目遇到的问题 前言 为什么要在flutter中引入webview?这不是废话么,当然是为了加载一个网页,这不是移动端最基本的需求么,哈哈!说的真不错,接下来我要是告诉你我的用法,你可能要大吃一惊.我的用处很简单,那就是在webview中再加载一个flutter编译成web的项目.有没有吓到你.别怕,我这么做的原因很简单,就是为了热更新.可能在flutter中实现热更新的方法有很多,但我敢说我这么做就是最好的热更新方式.当我内容发生变更是时候,我不需要继续去审核,只需要在服

  • Android WebView 缓存详解

     Android WebView 缓存详解 一. 两种缓存类型: 页面缓存:加载一个网页时的html.JS.CSS等页面或者资源数据,这些缓存资源是由于浏览器 的行为而产生,开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地影响到这些缓存数据. 而缓存的索引放在:/data/data//databases 对应的文件放在:/data/data/package_name/cache/webviewCacheChromunm下 数据缓存:分为AppCache和DOM Storage两种 我们

  • Android WebView的详解及实例

    Android WebView的详解       Android WebView在android平台上是一个特殊的View, 他能用来显示网页,这个类可以被用来在你的app中仅仅显示一张在线的网页,还可以用来开发浏览器. 在Android手机中内置了一款高性能webkit内核浏览器,在SDK中封装为一个叫做WebView组件.WebKit是Mac OS X v10.3及以上版本所包含的软件框 架(对v10.2.7及以上版本也可通过软件更新获取). 同时,WebKit也是Mac OS X的Safa

  • 关于Laravel-admin的基础用法总结和自定义model详解

    总结laravel-admin展示用到的基本方法 基础用法 自定义model 当列表数据获取有特定条件或自己写ORM方法时可以用到,支持排序 $grid->model()->select('id','name')->where('status',1)->groupBy('project_id'); $grid->model()->select('id','name')->where('status',1)->groupBy('project_id'); //

  • MySQL分类排名和分组TOP N实例详解

    MySQL分类排名和分组TOP N实例详解

    目录 表结构 题目一:获取每个科目下前五成绩排名(允许并列) 分析: 题目二:获取每个科目下最后两名学生的成绩平均值 分析: 题目三:获取每个科目下前五成绩排名(不允许并列) 分析: 总结 表结构 学生表如下: CREATE TABLE `t_student` ( `id` int NOT NULL AUTO_INCREMENT, `t_id` int DEFAULT NULL COMMENT '学科id', `score` int DEFAULT NULL COMMENT '分数', PRIM

  • Android实现Tab切换界面功能详解

    Android实现Tab切换界面功能详解

    目录 一.实验目的 二.实验任务 三.实验内容与要求 四.实现效果 五.代码实现 六.实验总结 一.实验目的 1. 掌握各种高级UI控件的基本使用: 2. 能够实现Tab切换效果. 二.实验任务 1. 根据原型图设计界面: 2. 实现Tab切换: 三.实验内容与要求 3.1 界面设计: (1)使用线性布局实现界面的基本布局: (2)使用不同的Tab实现方式实现tab的布局. 3.2 Tab切换 (1)监听Tab变化事件: (2)切换对应的页面内容: 四.实现效果 显示界面 隐藏界面 移除界面 五

  • Java工厂模式用法之如何动态选择对象详解

    目录 前言 小菜鸟的问题 有没有更好的方法呢 还有什么更好的办法吗 还能做得更好吗 如何在 SpringBoot 中实现此技术 总结 前言 工厂设计模式可能是最常用的设计模式之一,我想大家在自己的项目中都用到过.可能你会不屑一顾,但这篇文章不仅仅是关于工厂模式的基本知识,更是讨论如何在运行时动态选择不同的方法进行执行,你们可以看看是不是和你们项目中用的一样? 小菜鸟的问题 直接上例子说明,设计一个日志记录的功能,但是支持记录到不同的地方,例如: 内存中 磁盘上的文件 数据库 百度网盘等远程存储服

  • VsCode之使用WebView通信详解

    之前我在这篇文章VsCode插件开发之插件初步通信 通过插件完成通信,这回我还是通过插件,只不过方式主要以在ts文件里面使用webview来进行通信. 另外在此声明,一定要好好看仔细看官方文档,国内关于VsCode相关的开发,少之又少,虽然有一个叫小茗同学写的相对较全面,但是大家可以仔细看,其实他的内容大多也来自官方,同时有部分也加上自己的理解和想法.个人建议,关于VsCode插件相关的,最好是跑一跑VsCode相关官方例子,这样有助于对VsCode插件开发有一个大致的思路和全局认识,换言之有一

  • Linux中top命令输出详解

    前言 Linux下的top命令我相信大家都用过,自从我接触Linux以来就一直用top查看进程的CPU和MEM排行榜.但是top命令的其他输出结果我都没有了解,这些指标都代表什么呢,什么情况下需要关注呢?以及top命令输出结果的来源数据是什么呢,又是怎么一个计算原理呢? 演示环境 # uname -a Linux VM_1_11_centos 3.10.0-693.el7.x86_64 #1 SMP Tue Aug 22 21:09:27 UTC 2017 x86_64 x86_64 x86_6

随机推荐