方法一：通过css 实现选项卡

<div id="slider" class="mui-slider">

        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted bg-w">

            <a class="mui-control-item mui-active" href="#item1mobile">

                基本信息

            </a>

            <a class="mui-control-item" href="#item2mobile">

                办理程序

            </a>

            <a class="mui-control-item" href="#item3mobile">

                申请材料

            </a>

            <a class="mui-control-item" href="#item4mobile">

                其他

            </a>

        </div>

        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>

        <div class="mui-slider-group">

            <div id="item1mobile" class="base-info md-f1 mui-slider-item mui-control-content detailInfos md-box md-ver mui-active">

            	基本信息

            </div>

            <div id="item2mobile" class="process bg md-f1 mui-slider-item mui-control-content detailInfos1 md-box md-ver">

            	办理程序

            </div>

            <div id="item3mobile" class="apply bg md-f1 mui-slider-item mui-control-content detailInfos2 md-box md-ver">

            	申请材料

            </div>

            <div id="item4mobile" class="others md-f1 mui-slider-item mui-control-content detailInfos3 md-box md-ver">

            	其他

            </div>

        </div>

    </div>

方法二：通过webview 实现选项卡

main.html :

<body>

		<header class="mui-bar mui-bar-nav">

			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

			<h1 class="mui-title">顶部选项卡-可左右拖动(webview)</h1>

		</header>

		<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="subpage-1.html">

							推荐

						</a>

						<a class="mui-control-item" href="#item2mobile" data-wid="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 currentId = plus.webview.currentWebview().id;

				var group = new webviewGroup( currentId, {//重点在这里

					items: [{

						id: "subpage-1.html",

						url: "subpage-1.html",

						extras: {}

					}, {

						id: "subpage-2.html",

						url: "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>

subpage-1.html :

<body>

		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">

			<div class="mui-scroll">

				<div class="title">

					这是webview模式选项卡中的第1个子页面

				</div>

				<ul class="mui-table-view mui-table-view-chevron">

					<li class="mui-table-view-cell">

						<a href="" class="mui-navigate-right">推荐-Item 1</a>

					</li>

					<li class="mui-table-view-cell">

						<a href="" class="mui-navigate-right">推荐-Item 2</a>

					</li>

				</ul>

			</div>

		</div>

		<script src="../js/mui.min.js"></script>

		<script>

			mui.init({

				swipeBack: false,

				keyEventBind: {

					backbutton: false //关闭back按键监听

				},

				pullRefresh: {

					container: '#pullrefresh',

					up: {

						contentrefresh: '正在加载...',

						callback: pullupRefresh

					}

				}

			});

			var count = 0;

			/**

			 * 上拉加载具体业务实现

			 */

			function pullupRefresh() {

				setTimeout(function() {

					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。

					var table = document.body.querySelector('.mui-table-view');

					var cells = document.body.querySelectorAll('.mui-table-view-cell');

					for(var i = cells.length, len = i + 20; i < len; i++) {

						var li = document.createElement('li');

						li.className = 'mui-table-view-cell';

						li.innerHTML = '<a class="mui-navigate-right">推荐-Item ' + (i + 1) + '</a>';

						table.appendChild(li);

					}

				}, 1000);

			}

		</script>

	</body>

subpage-2.html  :

<body>

		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">

			<div class="mui-scroll">

				<div class="title">

					这是webview模式选项卡中的第2个子页面，该页面展示一个支持上拉加载的消息列表

				</div>

				<ul class="mui-table-view mui-table-view-chevron">

					<li class="mui-table-view-cell">

						<a href="" class="mui-navigate-right">热点-Item 1</a>

					</li>

					<li class="mui-table-view-cell">

						<a href="" class="mui-navigate-right">热点-Item 2</a>

					</li>

				</ul>

			</div>

		</div>

		<script src="../js/mui.min.js"></script>

		<script>

			mui.init({

				swipeBack: false,

				keyEventBind: {

					backbutton: false //关闭back按键监听

				},

				pullRefresh: {

					container: '#pullrefresh',

					up: {

						contentrefresh: '正在加载...',

						callback: pullupRefresh

					}

				}

			});

			var count = 0;

			/**

			 * 上拉加载具体业务实现

			 */

			function pullupRefresh() {

				setTimeout(function() {

					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。

					var table = document.body.querySelector('.mui-table-view');

					var cells = document.body.querySelectorAll('.mui-table-view-cell');

					for(var i = cells.length, len = i + 20; i < len; i++) {

						var li = document.createElement('li');

						li.className = 'mui-table-view-cell';

						li.innerHTML = '<a class="mui-navigate-right">热点-Item ' + (i + 1) + '</a>';

						table.appendChild(li);

					}

				}, 1000);

			}

		</script>

	</body>

mui 选项卡的更多相关文章

  1. MUI 选项卡切换+下拉刷新动态 完整实现一例

    前台最终呈现的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. mui 选项卡与header文字同步

    mui底部tab固定 头部nav可变 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. Mui 选项卡 tab 高度 没有自适应....

    因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是  用一个值 保存 当前 的 高度... 当 点击其他 t ...

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

      前  言           MUI是一款最接近原生APP体验的高性能前端框架,它的比较重要的功能是:下拉刷新.侧滑导航.滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候 ...

  5. mui实现切换选项卡

    mui切换选项卡头目对应选项内容是webAPP应用最多的功能 引入mui文件: 引入mui-segmented-control类实现顶部头目: 引入mui-content-padded类加入各选项卡内 ...

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

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

  7. mui底部选项卡切换实现

    MUI提供了两种webview和div模式,来实现底部选项卡切换 效果相同,div是在同一个页面实现所有切换块的页面,根据id导航,而webview是由多个页面组成,形成页面之间的来回跳转

  8. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  9. MUI框架-12-使用原生底部选项卡（凸出图标案例）

    MUI框架-12-使用原生底部选项卡(凸出图标案例) 今天,用 mui 做 app 时,遇到了可能各位都遇到过的头疼问题:底部中间图标凸起,如下图: 最后有源代码 [提示]:有人问我在 HBuilde ...

随机推荐

  1. Python 进阶 之 else块 巧(慎)用

    Python 的 else 模块和其他语言的else模块相比有那么一丢丢的特殊用法,有些用法虽然不推荐用,但是别人如果用了,最起码能看懂是不是? 1:快捷返回值: 格式: value1 if expr ...

  2. 实现类似微信聊天功能的mysql表设计

    前言: 最近设计了一套聊天功能,此功能支持人对人聊天.发送图片.查看聊天记录.按时间展示聊天列表.最后一条聊天数据及未读消息数 下面分享一下表结构及实现逻辑: 表结构: 1.聊天主表 id(主键id) ...

  3. Codeforces 538 A. Cutting Banner-substr()函数字符串拼接

      A. Cutting Banner   time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  4. eclispe新导入的文件有个小红叉号（x）的问题

    关于这个问题,我百度了很久,后面发现很简单的就解决了:我觉得可能大家的问题不一样,或许解决方法可能是一样的: 参考链接:https://zhidao.baidu.com/question/616762 ...

  5. 简单DP【p1934】封印

    Description 很久以前,魔界大旱,水井全部干涸,温度也越来越高.为了拯救居民,夜叉族国王龙溟希望能打破神魔之井,进入人界"窃取"水灵珠,以修复大地水脉.可是六界之间皆有封 ...

  6. MySQL 一张表中两个字段值互换

    update table a, table b set a.filed1= b.field2, a.field2= b.field1where a.id = b.id

  7. ( 转 ) 数据库BTree索引、Hash索引、Bitmap位图索引的优缺点

    测试于:MySQL 5.5.25 当前测试的版本是Mysql 5.5.25只有BTree和Hash两种索引类型,默认为BTree.Oracle或其他类型数据库中会有Bitmap索引(位图索引),这里作 ...

  8. mysql 列转行,合并字段的方法

    数据表(表名:xsk) +----+------+-----------+-------+ | id | name| course | score | +----+------+----------- ...

  9. AtCoder - 2567 RGB Sequence

    Problem Statement There are N squares arranged in a row. The squares are numbered 1, 2, …, N, from l ...

  10. [CF983E]NN country

    题意:给一棵树,有许多条巴士线路$(a_i,b_i)$(巴士在路径上每个点都会停车),多次询问从一点到另一点最少要坐多少次巴士 首先dfs一遍预处理出一个点向上坐$2^k$次巴士能到的最浅点,于是我们 ...