main.html 主页面打开可以正常滚动，但主页通过Ａ链接（或者open方法）打开任何内容较多的页面都不能正常滚动，于是就加了一个测试页，把hello mui 的索引列表原码拷贝进去，也是不正常滚动，
但在夜神模拟器上是可以的，试过网上的方法，一直没有正确答案，
man.html: 通用ajax 显示list, list里有一个链接 打开就是hello mui 的索引列
<!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" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/icons-extra.css" />
<style>
ul {
font-size: 14px;
color: #8f8f94;
}
.mui-btn {
padding: 10px;
}
</style>
<style>
html,
body {
background-color: #efeff4;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-left {
color: #fff;
}
.title {
margin: 35px 15px 10px;
}
.title+.content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
input {
color: #000;
}
</style>
</head>
<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!--侧滑菜单部分-->
<aside id="offCanvasSide" class="mui-off-canvas-left">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="content">
<p style="margin: 10px 15px;">
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
</p>
</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="myinfo.html">
我的
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="setting.html">
设定
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
修改密码
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
其它设定
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
退出
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
关于我们
</a>
</li>
</ul>
</div>
</div>
</aside>
<!--主界面部分-->
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">宏展在线</h1>
</header>
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-content">
<div class="mui-card" style="margin:0 0px; height: 100%;">
<div class="mui-card-header mui-card-media" style="height:60vw;background-image: url(images/bj.jpg);">
<div align="left" style="padding-top: 10px;">
<div style="margin: 35px;">
<p><span id="account" style="font-size: 24px;color:#FFFF00">车号：2389</span></p>
<p><span id="groupName" style="font-size: 18px;color:#FFFF00">车号：2389</span></p>
<p><span id="totalqty" style="font-size: 18px;color:#FFFF00">当前共运输：15车</span></p>
<p><span id="ctotalqty" style="font-size: 18px;color:#FFFF00">未完成：15车</span></p>
</div>
</div>
</div>
</div>
<ul class="mui-table-view" id="news">
<script id="list" type="text/html">
{{each program as list}}
<li class="mui-table-view-cell mui-media" id={{list.programEname}}>
<a href="html/{{list.programEname}}.html">
<img class="mui-media-object mui-pull-left" src="images/{{list.icon}}.png">
<div class="mui-media-body">
{{list.programCname}}
</div>
</a>
</li>
{{/each}}
</script>
</ul>
<div class="title">
本程序版权归广东宏展建设所有
</div>
<div class="title">
2018-2019
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<!--菜单-->
</div>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/template-web.js"></script>
<script>
mui.init(reloadqty());
var settings = app.getSettings();
var account = document.getElementById('account');
var groupName = document.getElementById('groupName');
//
window.addEventListener('show', function() {
var state = app.getState();
account.innerText = state.account;
}, false);
mui.plusReady(function() {
plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
plus.navigator.setStatusBarBackground('#FFF');//设置状态栏的颜色
var state = app.getState();
mui.ajax('http://www.yesbmf.com/getuser.asp', {
data: {
username: state.account,
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
account.innerText = "当前用户：" + data.pv_username;
groupName.innerText = "用户群组：" + data.userGroupName;
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
});
reloadqty();
//---
mui.ajax('http://www.yesbmf.com/getprogram.asp', {
data: {
username: state.account,
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
async: false,
success: function(data) {
var html = template('list', data);
document.getElementById('news').innerHTML = html;
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
});
//--
});
//--------菜单
mui('body').on('tap', 'a', function() {
document.location.href = this.href;
}); //这一句是A链接，手机上不能，加上这个就可以
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//移动效果是否为整体移动
var moveTogether = false;
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
var classList = offCanvasWrapper[0].classList;
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change', 'input', function() {
if(this.checked) {
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
classList.remove('mui-slide-in');
classList.remove('mui-scalable');
switch(this.value) {
case 'main-move':
if(moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
break;
case 'main-move-scalable':
if(moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
classList.add('mui-scalable');
break;
case 'menu-move':
classList.add('mui-slide-in');
break;
//case 'all-move':
// moveTogether = true;
//整体滑动时，侧滑菜单在inner-wrap内
// offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
// break;
}
offCanvasWrapper.offCanvas().refresh();
}
});
//菜单界面，‘关闭侧滑菜单’按钮的点击事件
document.getElementById('offCanvasHide').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('close');
});
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
//实现ios平台原生侧滑关闭页面；
if(mui.os.plus && mui.os.ios) {
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
plus.webview.currentWebview().setStyle({
'popGesture': 'none'
});
});
}
//－－－－－－菜单结束
function reloadqty() {
var state = app.getState();
mui.ajax('http://www.yesbmf.com/getqty.asp', {
data: {
username: state.account,
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
totalqty.innerText = "当前共:" + data.totalqty + "车";
ctotalqty.innerText = "未完成:" + data.ctotalqty + "车";
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
});
}
</script>
</body> </html>
1 个回复
橙子好多汁
老哥解决了吗