mui 选项卡

最新推荐文章于 2023-07-15 22:27:10 发布

转载最新推荐文章于 2023-07-15 22:27:10 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/crazycode2/p/7057843.html

文章标签：

#javascript #ViewUI

本文介绍两种在移动端实现选项卡的方法：一是使用CSS实现固定选项卡布局；二是利用webview进行选项卡切换，同时展示了如何在子页面中实现上拉加载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：通过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>

转载于:https://www.cnblogs.com/crazycode2/p/7057843.html