做了一个带有搜索框的的列表，都是用的mui组件，现在的情况就是点击搜索输入框弹出软键盘后，子页面会整体下移，并且导致所有带有子页面的的页面显示都出现下移情况，这种情况只在安卓设备有，ios就没有。
//父页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路况信息查询main</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">
<style>
body{
font-family: "微软雅黑";
font-size: 14px;
}
.mui-bar{
background-color: #1E81D2;
color: #FFFFFF;
padding-left: 0;
}
.mui-title{
color: #FFFFFF;
}
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{
height: 40px!important;
}
.mui-icon-search{
line-height: 45px;
}
.mui-input-row.mui-search .mui-icon-clear{
top: 10px;
}
input[type=search]{
background-color: #FFFFFF;
border-radius: 20px;
}
.mui-bar-nav~.mui-content .mui-pull-top-pocket{
top: 84px;
}
.mui-pull-bottom-pocket, .mui-pull-top-pocket{
height: 40px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="">
<div class="mui-action-back" style="float: left;width: 40px;height: 44px;padding-left: 10px;">
<img src="../../resources/images/nav_back@2x@2x.png" style="width: 22px;height: 22px;margin-top: 10px;"/>
</div>
<h1 id="title" class="mui-title">路况信息</h1>
</header>
<div class="mui-content">
<div class="mui-input-row mui-search">
<input type="search" style="" class="mui-input-clear" placeholder="可输入多个关键字，以空格隔开">
</div>
</div>
</body>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript">
//启用双击监听
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'search_sub.html',
id:'modules/illegalReport/search_sub.html',
styles:{
top: '85px',
bottom:'0px',
softinputMode:'adjustResize'
}
}]
});
//console.log(plus.webview.defaultHardwareAccelerated());
var contentWebview = null;
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
</script>
</html>
//子页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路况信息查询sub</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">
<style>
body{
font-family: "微软雅黑";
font-size: 14px;
}
p{
margin-bottom: 0;
color: #1f1f1f;
}
tr{
border-bottom: 1px solid #EEEEEE;
}
.mui-media-body{
height: 75px;
}
.mui-media-body p{
margin-top: 15px;
font-size: 12px;
color: #999999;
}
.mui-ellipsis-2{
font-size: 14px;
color: #222222;
}
.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn){
margin-right: -20px;
}
#roadInfo{
margin-bottom: 10px;
}
#roadInfo img{
max-width: 100px;
width: 100px;
height: 75px;
}
#roadInfo li{
height: 90px;
padding: 11px 20px;
}
.mui-media-body img{
margin-top: 17px;
}
.mui-table-view-cell>a:not(.mui-btn){
margin: -11px -20px;
padding: 6px 20px;
}
.mui-table-view:after{
height: 0;
}
.mui-table-view-cell.mui-active{
background-color: #FFFFFF;
}
.mui-pull-bottom-pocket, .mui-pull-top-pocket{
height: 40px;
}
</style>
</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron" id="roadInfo">
<li class="mui-table-view-cell mui-media" v-for="item in items">
<a href="javascript:;" @tap="open_detail(item)" >
<img class="mui-media-object mui-pull-left" :src="item.listimg">
<div class="mui-media-body">
<div class="mui-ellipsis-2">{{item.content}}</div>
<template v-if="item.state==0">
<img src="../../resources/images/uncover@2x.png" style="max-width: 36px;width: 36px;height: 14px;"/>
</template>
<template v-else>
<img src="../../resources/images/recover@2x.png" style="max-width: 36px;width: 36px;height: 14px;"/>
</template>
<p style="float: right;">{{item.time}}</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript" src="../../js/vue.min.js" ></script>
<script type="text/javascript" src="../../lib/Overall.js" ></script>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var additem = [];
var roads = new Vue({
el: '#roadInfo',
data: {
//banner: {}, //顶部banner数据
items: []//列表信息流数据
},
methods:{
add:function(){
this.items.concat(additem);
}
}
});
//获取列表数据
//document.addEventListener('getIllegalsJson', function(event) {
mui.getJSON('../../data/roads.json', null, function(data) {
console.log(JSON.stringify(data.roads));
roads.items = data.roads;
});
//});
//console.log(roads.items[0].state);
/*
* 打开详情
*/
function open_detail(item) {
//触发子窗口变更新闻详情
mui.fire(webview_detail, 'get_detail', {
listimg: item.listimg,
section:item.section,
place:item.place,
direction:item.direction,
time:item.time,
shape:item.shape,
reson:item.reson,
recoverytime:item.recoverytime,
state:item.state,
});
setTimeout(function () {
webview_detail.show("slide-in-right", 300);
},150);
}
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
roads.items = roads.items.slice(0,4); //初始化数据
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');
roads.items = roads.items.concat(additem); //增加数据
}, 1500);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
//mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
//console.log(plus.webview.defaultHardwareAccelerated());
//预加载详情页
webview_detail = mui.preload({
url: 'roadDetail.html',
id: 'modules/roadQuery/roadDetail.html',
styles: {
statusbar:{background:$statusBarColor}
}
});
});
} else {
mui.ready(function() {
//mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>
</body>
</html>
