主页面有三个tab页，前两个tab页构造基本一样，包括一个父页面和两个子页面，父页面包括顶部标题栏和内容区，标题栏放了两个tab，创建两个webview存放两个子页面，两个子页面有下拉刷新功能。现在问题是主页面第一个tab页下的下拉刷新的下拉距离正常，第二个tab页的下拉刷新距离很短，遮挡住了下拉刷新提示文字。我尝试把两个tab页的顺序调换，问题还是存在，我又尝试了tab页直接放一个下拉刷新页面（不是父子页面），不会出现这样的问题。下面贴上我的代码：
1.主页面
<!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="css/mui.min.css" rel="stylesheet"/>
</head>
<body id="app">
<!--<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">{{title}}</h1>
</header>-->
<nav class="mui-bar mui-bar-tab">
<a v-for="item in tabbar" class="mui-tab-item" v-bind:class="{'mui-active': $index === initIndex}" v-bind:href="item.url" v-on:tap="tab($index)">
<span class="mui-icon mui-icon-{{item.icon}}"></span>
<span class="mui-tab-label" style="font-size: 15px;">{{item.title}}</span>
</a>
</nav>
<div class="mui-content"></div>
<script src="js/mui.min.js"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var aniShow = {};
var app = new Vue({
el: '#app',
data: {
initIndex: 0, //[初始化参数]
title: '首页',
activeTab: 'pages/ssj_main.html',
tabbar: [
{icon:'starhalf',title:'双随机',url: 'pages/ssj_main.html'},
{icon:'navigate',title:'靶向性',url: 'pages/bxx_main.html'},
{icon:'gear',title:'更多',url: 'pages/phone.html'},
],
subStyle: {
top: '0px',
bottom: '51px'
}
},
ready: function() {
mui.init();
// Vue实例化对象
var self = this;
// 初始化
if(mui.os.plus){
mui.plusReady(function() {
var curWs = plus.webview.currentWebview();
for(var i=0;i < self.tabbar.length;i++){
var temp = {};
var subUrl = self.tabbar[i].url;
var subWs = plus.webview.create(subUrl, subUrl, self.subStyle);
if(i != self.initIndex){
subWs.hide();
}else{
temp[subUrl] = "true";
mui.extend(aniShow,temp);
}
curWs.append(subWs);
}
})
}else{
createIframe('.mui-content',{
url: self.tabbar[self.initIndex].url,
style: self.subStyle
})
}
},
methods: {
tab: function (index) {
var targetTab = this.tabbar[index].url;
if(this.activeTab == targetTab)
return;
// 标题切换
this.title = this.tabbar[index].title;
// 子页内容切换
if(mui.os.ios||aniShow[targetTab]){
// 显示目标webview
plus.webview.show(targetTab);
}else{
//否则，使用fade-in动画，且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",200);
// // 创建iframe代替子页面
// createIframe('.mui-content',{
// url: targetTab,
// style: this.subStyle
// })
}
// 隐藏当前webview
plus.webview.hide(this.activeTab);
// 更改当前活跃的选项卡
this.activeTab = targetTab;
}
}
})
</script>
</body>
</html>2.第一个tab页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-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 rel="stylesheet" href="../css/mui.min.css">
</head>
<body id="ssj">
<header class="mui-bar mui-bar-nav">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control" style="margin-top: -5px;">
<a v-for="item in tabbar" class="mui-control-item" v-bind:class="{'mui-active': $index === initIndex}" v-bind:href="item.url" v-on:tap="tab($index)" v-on:doubletap="toTop($index)">
<!--<span class="mui-icon mui-icon-{{item.icon}}"></span>-->
<span class="mui-tab-label" style="font-size: 15px;">{{item.title}}</span>
</a>
</div>
</header>
<div class="mui-content"></div>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue-mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var aniShow = {};
var app = new Vue({
el: '#ssj',
data: {
initIndex: 0, //[初始化参数]
title: '未检查',
activeTab: 'ssj_tasklist1.html',
tabbar: [
{icon:'',title:'未检查',url: 'ssj_tasklist1.html'},
{icon:'',title:'已检查',url: 'ssj_tasklist2.html'}
],
subStyle: {
top: '45px',
bottom: '0px'
}
},
ready: function() {
mui.init({
gestureConfig:{
doubletap:true
}
});
// Vue实例化对象
var self = this;
// 初始化
if(mui.os.plus){
mui.plusReady(function() {
var curWs = plus.webview.currentWebview();
for(var i=0;i < self.tabbar.length;i++){
var temp = {};
var subUrl = self.tabbar[i].url;
var url = '';
if(i==0)
url = subUrl;
var subWs = plus.webview.create(url, subUrl, self.subStyle);
if(i != self.initIndex){
subWs.hide();
}else{
temp[subUrl] = "true";
mui.extend(aniShow,temp);
}
curWs.append(subWs);
}
})
}else{
createIframe('.mui-content',{
url: self.tabbar[self.initIndex].url,
style: self.subStyle
})
}
},
methods: {
tab: function (index) {
var targetTab = this.tabbar[index].url;
if(this.activeTab == targetTab)
return;
// 标题切换
// this.title = this.tabbar[index].title;
// 子页内容切换
if(mui.os.ios||aniShow[targetTab]){
// 显示目标webview
plus.webview.show(targetTab);
}else{
plus.webview.currentWebview().children()[index].loadURL(targetTab);//webview载入url
//否则，使用fade-in动画，且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",200);
// // 创建iframe代替子页面
// createIframe('.mui-content',{
// url: targetTab,
// style: this.subStyle
// })
}
// 隐藏当前webview
plus.webview.hide(this.activeTab);
// 更改当前活跃的选项卡
this.activeTab = targetTab;
},
toTop: function(index){
var contentWebview = null;
contentWebview = plus.webview.currentWebview().children()[index];
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
}
}
})
</script>
</body>
</html>-
第二个tab页
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-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 rel="stylesheet" href="../css/mui.min.css"> </head> <body id="bxx"> <header class="mui-bar mui-bar-nav"> <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control" style="margin-top: -5px;"> <a v-for="item in tabbar" class="mui-control-item" v-bind:class="{'mui-active': $index === initIndex}" v-bind:href="item.url" v-on:tap="tab($index)" v-on:doubletap="toTop($index)"> <!--<span class="mui-icon mui-icon-{{item.icon}}"></span>--> <span class="mui-tab-label" style="font-size: 15px;">{{item.title}}</span> </a> </div> </header> <div class="mui-content"></div> <script src="../js/mui.min.js"></script> <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/vue-mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var aniShow = {}; var app = new Vue({ el: '#bxx', data: { initIndex: 0, //[初始化参数] title: '未检查', activeTab: 'bxx_tasklist1.html', tabbar: [ {icon:'',title:'未检查',url: 'bxx_tasklist1.html'}, {icon:'',title:'已检查',url: 'bxx_tasklist2.html'} ], subStyle: { top: '45px', bottom: '0px' } }, ready: function() { mui.init({ gestureConfig:{ doubletap:true } }); // Vue实例化对象 var self = this; // 初始化 if(mui.os.plus){ mui.plusReady(function() { var curWs = plus.webview.currentWebview(); for(var i=0;i < self.tabbar.length;i++){ var temp = {}; var subUrl = self.tabbar[i].url; var subWs = plus.webview.create(subUrl, subUrl, self.subStyle); if(i != self.initIndex){ subWs.hide(); }else{ temp[subUrl] = "true"; mui.extend(aniShow,temp); } curWs.append(subWs); } }) }else{ createIframe('.mui-content',{ url: self.tabbar[self.initIndex].url, style: self.subStyle }) } }, methods: { tab: function (index) { var targetTab = this.tabbar[index].url; if(this.activeTab == targetTab) return; // 标题切换 this.title = this.tabbar[index].title; // 子页内容切换 if(mui.os.ios||aniShow[targetTab]){ // 显示目标webview plus.webview.show(targetTab); }else{ //否则，使用fade-in动画，且保存变量 var temp = {}; temp[targetTab] = "true"; mui.extend(aniShow,temp); plus.webview.show(targetTab,"fade-in",200); // // 创建iframe代替子页面 // createIframe('.mui-content',{ // url: targetTab, // style: this.subStyle // }) } // 隐藏当前webview plus.webview.hide(this.activeTab); // 更改当前活跃的选项卡 this.activeTab = targetTab; }, toTop: function(index){ var contentWebview = null; contentWebview = plus.webview.currentWebview().children()[index]; contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)"); } } }) </script> </body> </html>4.下拉刷新页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-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 rel="stylesheet" href="../css/mui.min.css"> </head> <body> <div class="mui-content"> <!--下拉刷新容器--> <div id="pullrefresh" class="mui-scroll-wrapper"> <div class="mui-scroll"> <!--数据列表--> <ul class="mui-table-view mui-table-view-chevron"> </ul> </div> </div> </div> <script src="../js/mui.min.js"></script> <script> mui.init({ pullRefresh: { container: '#pullrefresh', down: { callback: pulldownRefresh }, up: { contentrefresh: '正在加载...', callback: pullupRefresh } } }); /** * 下拉刷新具体业务实现 */ function pulldownRefresh() { setTimeout(function() { var table = document.body.querySelector('.mui-table-view'); var cells = document.body.querySelectorAll('.mui-table-view-cell'); for (var i = cells.length, len = i + 3; 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.insertBefore(li, table.firstChild); } mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed }, 1500); } 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); } if (mui.os.plus) { mui.plusReady(function() { // mui('#pullrefresh').pullRefresh().pullupLoading(); setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 1); }); } else { mui.ready(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }); } </script> </body>
</html>
1***@qq.com (作者)
看一下上面两张图片，第一个页面下拉程度和第二个页面不一样，这两个页面布局是一样的，都是父页面加载子页面，不知道为什么会出现这种情况，我是在官方demo的基础上修改的。另外，你说的那个修改文字的位置我试过没有用。
2016-12-26 14:12