具体需求描述是这样的：父页面有两个链接需要导向segment页并根据传入的querystring激活不同的段落。
使用原始的url带参的方式，没有使用自定义扩展参数的方式，不过建议使用自定义扩展参数的方式。
mui.openwindow({
extras:{
'x_id':'10'//自定义扩展参数，可以用来处理页面间传值
}
})在B页面这样去获取
var self=plus.webview.currentWebview();
var id=self.x_id;具体的实现代码如下：
父页面html,打开链接依然使用mui.openwindow.
<ul>
<li><a class="mui-inline" href="http://ask.dcloud.net.cn/myxx.html?model=item1mobile" style="color:rgb(0, 0, 0) ;">商家XX</a></li>
<li>20</li>
</ul>
<ul>
<li ><a class="mui-inline" href="http://ask.dcloud.net.cn/myxx.html?model=item2mobile" style="color:rgb(0, 0, 0) ;">个人XX</a></li>
<li>10</li>
</ul>子页面：
<!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>我的XX</title>
<link href="http://ask.dcloud.net.cn/../css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.mui-segmented-control .mui-control-item {
line-height: 28px;
}
.mui-title {
font-family: simhei;
}
.gray_color {
color: #8f8f94;
font-size: 0.8em;
}
</style>
</head>
<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">我的XX</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded tab_title" style="margin: 0.65em 3em;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1mobile">
商家XX
</a>
<a class="mui-control-item" href="#item2mobile">
个人XX
</a>
</div>
</div>
<div id="item1mobile" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:void(0);">
<img class="mui-media-object mui-pull-left" src="../images/content.jpg">
<div class="mui-media-body">
3月19日XXXXX<span class='mui-pull-right gray_color'>3月18号</span>
<p class='mui-ellipsis'>您在日历XXX中设定的XXX即将到来</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:void(0);">
<img class="mui-media-object mui-pull-left" src="../images/content.jpg">
<div class="mui-media-body">
3月15日XXX<span class='mui-pull-right gray_color'>3月14号</span>
<p class='mui-ellipsis'>您在XXX即将到来</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:void(0);">
<img class="mui-media-object mui-pull-left" src="../images/content.jpg">
<div class="mui-media-body">
3月11日XXX<span class='mui-pull-right gray_color'>3月10号</span>
<p class='mui-ellipsis'>您在日历XXX即将到来</p>
</div>
</a>
</li>
</ul>
</div>
<div id="item2mobile" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:void(0);">
<img class="mui-media-object mui-pull-left" src="../images/content.jpg">
<div class="mui-media-body">
订单消息<span class='mui-pull-right gray_color'>4月12号</span>
<p class='mui-ellipsis'>xxxxxxxx</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:void(0);">
<img class="mui-media-object mui-pull-left" src="../images/content.jpg">
<div class="mui-media-body">
订单消息<span class='mui-pull-right gray_color'>4月10号</span>
<p class='mui-ellipsis'>xxxxxxx</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
//我使用plus，有时候会报undefined错误
console.log(plus.webview.currentWebview().id)
})
mui.ready(function() {
var urlx = this.document.URL.toString();
var modelx = "item1mobile";
if (urlx.lastIndexOf('?') != -1) {
modelx = urlx.substr(urlx.lastIndexOf('?') 1, urlx.length).split('=')[1];
}
var ar = document.getElementById("segmentedControl").querySelectorAll(".mui-control-item");
var reg = new RegExp('(\\s|^)' 'mui-active' '(\\s|$)');
var item1 = document.getElementById("item1mobile");
var item2 = document.getElementById("item2mobile");
//重置
ar[0].className = ar[0].className.replace(reg, '');
ar[1].className = ar[1].className.replace(reg, '');
item1.className = item1.className.replace(reg, '');
item1.className = item2.className.replace(reg, '');
if (modelx == "item1mobile") {
ar[0].className = " mui-active";
ar[1].className = ar[1].className.replace(reg, '');
item1.className = " mui-active";
item2.className = item2.className.replace(reg, '');
} else {
ar[0].className = ar[0].className.replace(reg, '');
ar[1].className = " mui-active";
item2.className = " mui-active";
item1.className = item1.className.replace(reg, '');
}
});
</script>
</body>
</html>
1 个评论
要回复文章请先登录或注册
闭目狂奔