mui 選項卡

時間 2019-11-19

標籤 mui 選項简体版

原文原文鏈接

方法一：經過css 實現選項卡javascript

<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 實現選項卡css

main.html :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 :java

<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 :web

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。