先上图
<!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" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="../../css/mui.min.css" rel="stylesheet" />
<link href="../../css/common.css" rel="stylesheet" />
<link href="../../css/iconfont1.css" rel="stylesheet" />
<style type="text/css">
html,
body {
background-color: #efeff4;
}
/*搜索框*/
#search {
display: inline-flex;
width: 100%;
padding: 4px 5px;
background: #DDDDDD;
height: 42px;
}
#search input {
height: 34px;
padding: 2px;
font-size: 12px;
text-align: center;
background: #FFFFFF;
}
.mui-control-content{
height: 100%;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">城市商业圈</h1>
</header>
<div class="mui-content">
<div style="padding: 0 10px;">
<div id="sliderSegmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">
<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
关注
</a>
<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
推荐
</a>
<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
附近
</a>
</div>
</div>
<!--搜索栏位置-->
<div id="search">
<input type="search" class="mui-input-clear" placeholder="请输入关键字/标签" maxlength="20" />
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/webviewGroup.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
var _self = plus.webview.currentWebview();
var group = new webviewGroup(_self.id, {
items: [{
id: "tab-top-subpage-1.html",
url: "tab-top-subpage-1.html",
extras: {}
}, {
id: "tab-top-subpage-2.html",
url: "tab-top-subpage-2.html",
extras: {}
}, {
id: "tab-top-subpage-3.html",
url: "tab-top-subpage-3.html",
extras: {}
}],
onChange: function(obj) {
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove("mui-active");
}
var target = document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")");
target.classList.add("mui-active");
if(target.scrollIntoView) {
target.scrollIntoView();
}
}
});
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>