做了一个带有搜索框的的列表，都是用的mui组件，现在的情况就是点击搜索输入框弹出软键盘后，子页面会整体下移，并且导致所有带有子页面的的页面显示都出现下移情况，这种情况只在安卓设备有，ios就没有。
//父页面
路况信息查询mainbody{
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;
}
路况信息
//启用双击监听
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)");
});
//子页面
路况信息查询subbody{
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;
}
- {{item.content}}
{{item.time}}
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();
});
}