在tabbar中写了四个子页面,子页面中分别都使用了下拉刷新,可是每次测试的时候,下拉刷新只随机在一个页面上有效,请问是什么原因?有什么解决方法?
tabbar页面
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="http://ask.dcloud.net.cn/index.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="http://ask.dcloud.net.cn/../Latest/index.html">
<span class="mui-tab-label">最新揭晓</span>
</a>
<a class="mui-tab-item" href="http://ask.dcloud.net.cn/../Explore/index.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item" href="http://ask.dcloud.net.cn/../List/index.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">清单</span>
</a>
<a class="mui-tab-item" href="http://ask.dcloud.net.cn/../Mine/index.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<script type="text/javascript" charset="utf-8">
var subpages = ['index.html', '../Latest/index.html', '../Explore/index.html', '../List/index.html', '../Mine/index.html'];
var subpage_style = {
top: '0px',
bottom: '50px'
};
//创建子页面,首个选项卡页面显示,其它均隐藏;
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for (var i = 0; i < 5; i ) {
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
}
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[0];
// var title = document.getElementById("title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//显示目标选项卡
plus.webview.show(targetTab);
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
//自定义事件,模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(defaultTab, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
</script>
子页面
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-search mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<div class="mui-content">
</div>
<script>
mui.init({
subpages: [{
url: 'index_.html',
id: 'index_.html',
styles: {
top: '45px',
bottom: '0px',
}
}]
});
</script>
子页面的刷新页面
<div id="pullMine" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
我的
</div>
</div>
<script>
//下拉刷新
mui.init({
pullRefresh: {
container: '#pullMine',
down: {
callback: pulldownRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
</script>
0 个回复