可以左右滑动的导航栏

在这里插入图片描述
源码：
<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>我的首页</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-bar a {
				color: #E02D26;
			}
			
			body {
				background: white;
			}
			
			#topItem {
				background: white;
				border-bottom: 1px solid #EEEEEE;
			}
			
			.mui-slider .mui-segmented-control.mui-scroll-wrapper {
				height: 40px;
			}
			
			.mui-slider .mui-segmented-control .mui-control-item {
				line-height: 37px;
			}
			
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
				padding: 0 12px
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
				border-bottom: 2px solid white;
				color: black;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				border-bottom: 2px solid #E02D26;
				color: #E02D26;
				font-weight: bold;
			}
			
			.mui-slider-group .mui-slider-item {
				height: 0px;
			}
		</style>
	</head>
 
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back"></a>
			<h1 class="mui-title">我的首页</h1>
		</header>
 
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="topItem" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll" id="top-scroll">
						<a class='mui-control-item mui-active' href="#item1mobile" data-wid="OrderAll.html">全部</a>
						<a class='mui-control-item' href="#item2mobile" data-wid="WaitPayment.html">送女友</a>
						<a class='mui-control-item' href="#item3mobile" data-wid="WaitShared.html">送男友</a>
						<a class='mui-control-item' href="#item4mobile" data-wid="WaitDelivery.html">送闺蜜</a>
						<a class='mui-control-item' href="#item5mobile" data-wid="WaitReceipt.html">送长辈</a>
						<a class='mui-control-item' href="#item6mobile" data-wid="WaitEvaluate.html">送朋友</a>
					</div>
				</div>
				<!--勿删除以下代码，作用是保证顶部菜单动画-->
				<div class="mui-slider-group" style="height: 0px;">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active"></div>
					<div id="item2mobile" class="mui-slider-item mui-control-content"></div>
					<div id="item3mobile" class="mui-slider-item mui-control-content"></div>
					<div id="item4mobile" class="mui-slider-item mui-control-content"></div>
					<div id="item5mobile" class="mui-slider-item mui-control-content"></div>
					<div id="item6mobile" class="mui-slider-item mui-control-content"></div>
				</div>
			</div>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.init();
			var subpage_style = {
				top: '84px',
				bottom: '0px',
				render: 'always'
			};
			var subLen = 6;
			var activeIndex = 0;
			var targetIndex = 0;
			// 子页面滑动切换事件
			window.addEventListener("swipe_event", function(event) {
				// 获取方向以及索引
				var direction = event.detail.direction;
				activeIndex = event.detail.index;
				if(direction == "left") {
					if(activeIndex == subLen - 1) {
						console.log("最右边一页了");
						return;
					}
					targetIndex = activeIndex + 1;
				} else {
					if(activeIndex == 0) {
						console.log("最左边一页了");
						return;
					}
					targetIndex = activeIndex - 1;
				}
				switchPage("switch", targetIndex);
			});
 
			//切换页面
			function switchPage(_event, _target) {
				mui(".mui-control-item").each(function(i, e) {
					if(i == _target)
						$(this).addClass("mui-active");
					else
						$(this).removeClass("mui-active");
				})
				var targetTab = $($("#top-scroll").children()[_target]).attr("data-wid")
				var _subWv = plus.webview.getWebviewById(targetTab);
				if(!_subWv) {
					var postUrl = "../MyOrder/" + targetTab;
					_subWv = plus.webview.create(postUrl, targetTab, subpage_style);
					self.append(_subWv);
				}
				_subWv.show();
 
				plus.webview.getWebviewById(activeTab).hide('none');
				activeTab = targetTab;
			}
 
			var activeTab = null;
			var self = null;
			var gotoIndex = null;
			mui.plusReady(function() {
				self = plus.webview.currentWebview();
				gotoIndex = self.gotoIndex;
				if(gotoIndex != null) {
					activeTab = self.activeTab;
					var sub = plus.webview.create("../MyOrder/" + activeTab, activeTab, subpage_style);
					self.append(sub);
					mui(".mui-control-item").each(function(i, e) {
						if(i == gotoIndex)
							$(this).addClass("mui-active");
						else
							$(this).removeClass("mui-active");
					})
				} else {
					activeTab = "OrderAll.html";
					var sub = plus.webview.create("../MyOrder/OrderAll.html", "OrderAll.html", subpage_style);
					self.append(sub);
				}
				mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
					var targetTab = this.getAttribute('data-wid');
					if(targetTab == activeTab) {
						return;
					}
					var _subWv = plus.webview.getWebviewById(targetTab);
					if(!_subWv) {
						var postUrl = "../MyOrder/" + targetTab;
						_subWv = plus.webview.create(postUrl, targetTab, subpage_style);
						self.append(_subWv);
					}
					_subWv.show();
					plus.webview.getWebviewById(activeTab).hide('none');
					activeTab = targetTab;
				});
			})
			mui.back = function() {
				var _self = plus.webview.currentWebview();
				_self.close("auto");
			}
		</script>
	</body>
 
</html>
转载：
https://blog.csdn.net/qq_25027593/article/details/83008410
可以左右滑动的导航栏

猜你喜欢
