用官方案例中的Reader修改的。。启用了双webview模式，首页面顶部导航，使用了scroll滚动，但是子页面启用下拉刷新后，主页面的导航就无法滚动。。去掉下拉刷新后恢复正常。。找不到原因啊。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iApp开发测试</title>
<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">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/app.css" />
<style type="text/css">
.mui-content .mui-pull-top-pocket{top: 35px !important;}
#topNav a.mui-active{color:#09742D;border-bottom: none;}
.mui-bar-tab .mui-tab-item.mui-active {color: #09742D;}
.mui-bar-nav~.mui-content {padding-top: 0;}
</style>
</head>
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<div class="mui-content">
<div id="topNav" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active">推荐</a>
<a class="mui-control-item">热点</a>
<a class="mui-control-item">北京</a>
<a class="mui-control-item">社会</a>
<a class="mui-control-item">娱乐</a>
<a class="mui-control-item">科技</a>
<a class="mui-control-item">时政</a>
<a class="mui-control-item">直播</a>
</div>
</div>
</div>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
var aniShow = "pop-in";
var setting_view = null;
var _self;
var webstyle = {
"render": "always",
"popGesture": "hide",
"bounce": "vertical",
"bounceBackground": "#efeff4",
"titleNView": {
backgroundColor: '#16873C', //导航栏背景色
titleText: '设置', //导航栏标题
titleColor: '#ffffff', //文字颜色
type: 'default', //透明渐变样式
autoBackButton: true, //自动绘制返回箭头
splitLine: { //底部分割线
color: '#108337'
}
}
}
//mui初始化，配置下拉刷新
mui.init({
swipeBack:false, subpages:[{url:"list.html",id:"list",styles:{top:"107px",bottom:"51px",},extras:{}
}],
//预加载页面
preloadPages: [{...}]
});
mui.plusReady(function() {
//仅支持竖屏显示
plus.screen.lockOrientation("portrait-primary");
// 隐藏滚动条
plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
//设置scroll插件参数_导航栏滚动
mui('#topNav').scroll({
indicators: false, //是否显示滚动条
deceleration: mui.os.ios ? 0.003 : 0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
});
//绘制顶部图标
_self = plus.webview.currentWebview();
var titleView = _self.getNavigationbar();
if(!titleView) {titleView = plus.webview.getLaunchWebview().getNavigationbar();}
titleView.drawRect("#108337", {top: "43px",height:"1px",left: "0px"});
......
});
</script>
</body>
</html>
// list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iApp开发测试</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">
<link rel="stylesheet" href="css/app.css" />
<style>
html,
body {
min-height: 100%;
background: #efeff4;
background-color: #efeff4;
}
.kr-article .kr-table-view .mui-media-body {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: normal!important;
word-wrap: break-word;
height: 63px;
}
.kr-article .kr-table-view .kr-time {
position: absolute;
left: 110px;
bottom: 8px;
}
.kr-loading {
color: gray;
;
text-align: center;
font-size: 16px;
padding: 15px;
background: #efeff4;
background-color: #efeff4;
border: none;
}
.mui-scroll {
position: absolute;
z-index: 1;
width: 100%;
-webkit-transform: none;
｝
</style>
</head>
<body class="kr-article">
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="slider" class="mui-slider kr-slider">
<div class="mui-slider-group">
<div class="mui-slider-item">
<a id="slider-image" href="javascript:;" style="background-image: url(img/blank.jpg);">
<div id="slider-title" class="mui-slider-title"></div>
<div class="kr-image-overlay"></div>
</a>
</div>
</div>
</div>
<ul id="kr-news" class="mui-table-view kr-table-view">
<li class="kr-loading">正在加载...</li>
</ul>
</div>
</div>
<script type="text/javascript" charset="UTF-8" src="js/mui.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/feed.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/html5sql.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/app.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/news.js"></script>
<script type="text/javascript" charset="UTF-8" src="tmpl/news_item.js"></script>
<script>
console.time("进入页面到呈现");
var divEl = document.createElement("div");
var newsEl = document.getElementById("kr-news");
var sliderEl = document.getElementById("slider");
//初始化下拉刷新模块
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
function throwGetNewsError() {
mui.plusReady(function() {
mui('#pullrefresh').pullRefresh().endPulldown();
mui.toast("获取新闻时发生了异常");
});
};
//点击新闻列表，打开新闻详情
mui('#pullrefresh').on('tap', 'a', function() {
open_new_detail(this.getAttribute('data-guid'));
});
//TODO 为了解决系统分享闪屏问题，临时变成双webview
var detailMainWebview = null; //详情页面父webview
var detailWebview = null; //详情页面子webview
function open_new_detail(id) {...};
/** 新版首次进入执行代码开始 **/
kr.dbReady(function(isFirst) {
//第一次显示，从rss订阅中抓取
if (isFirst) {
clearNewsList();
mui.plusReady(function() {
getFeed();
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
});
}
else {
//非第一次，直接从本地数据库中读取
//加载初始化数据
pullupRefresh(true, true);
}
});
mui.plusReady(function() {
getSlider(true);
//1秒之后，自动刷新
setTimeout(function() {pulldownRefresh();}, 500);
});
/** 新版首次进入执行代码结束 **/
var latestPubDate = Number.MAX_VALUE;
var hasMore = true;
/**
* 获取顶部图片轮播区文章详情
* @param {Boolean} isLocal :是否已缓存本地
*/
function getSlider(isLocal) {
//sliderEl.classList.remove('mui-hidden');
kr.getSlider(isLocal, function(news) { //等feed完成后再加载slider
//console.log("news 333:" + JSON.stringify(news));
if (news) {
if (typeof news === 'string') {
//console.log("news:" + news);
kr.getNewsByGuid(news, updateSlider);
} else {
updateSlider(news);
}
}
});
};
function getFeed(isClearCache) {
//console.log('getFeed=>' + isClearCache);
if (isClearCache === 'true') {
latestPubDate = Number.MAX_VALUE;
newsEl.innerHTML = ''; //清空所有
if (!hasMore) { //当清除缓存之前已上拉加载到底需要重置pullrefresh
mui('#pullrefresh').pullRefresh().refresh(true);
hasMore = true;
}
}
//加载数据时，显示雪花进度条
mui('#pullrefresh').pullRefresh().pullupLoading(function() {
//获取新闻列表，存储数据库
kr.getFeed(
function(hasNew){getSlider();kr.getNews(function(news) {refresh(news);}, throwGetNewsError);},
function(){getSlider(); mui('#pullrefresh').pullRefresh().endPullupToRefresh();}
);
});
}
function pulldownRefresh() {
//console.log('pulldown');
kr.getFeed(function(hasNew) {
//更新顶部轮播区域
getSlider();
//console.log(hasNew);
if (hasNew) {
kr.getNews(false, hasNew, function(news) {refresh(news);}, throwGetNewsError);
}
else {
setTimeout(function() {mui('#pullrefresh').pullRefresh().endPulldown();}, 500);
}
}, throwGetNewsError);
};
/**
* 更新新闻列表
* @param {Object} news 列表数据
*/
function refresh(news) {
if (news) {
if (latestPubDate === Number.MAX_VALUE && news && news.length > 0) {
latestPubDate = news.item(news.length - 1).pubDate;
}
for (var i = news.length - 1; i >= 0; i--) {
divEl.innerHTML = news_item(processNews(news.item(i)));
newsEl.insertBefore(divEl.firstElementChild, newsEl.firstElementChild);
}
}
mui('#pullrefresh').pullRefresh().endPulldown();
};
/**
* 更新顶部图片轮播内容
* @param {Object} 图片轮播区广告详情
*/
var sliderImageEl = document.getElementById("slider-image");
var sliderTitleEl = document.getElementById("slider-title");
// sliderImageEl.addEventListener('tap', function() {
// console.log("sliderImageEl tap");
// if (sliderImageEl.newsId) {
// open_new_detail(sliderImageEl.newsId);
// }
// });
function updateSlider(news) {
//alert('sliderImageEl');
//console.log("updateSlider news:" + JSON.stringify(news));
if (news.image) {
sliderImageEl.setAttribute('style', 'background-image: url("' + news.image + '");');
}
else {
if (!news.image && news.cover) {
kr.isDownloadImageAsync(function(yes) {
if (!yes) return;
(function(news) {
//console.log(news);
news.id = news.guid; //.substring(news.guid.lastIndexOf('/') + 1, news.guid.length - 5);
news.id = news.guid.substring(news.guid.lastIndexOf('/') + 1, news.guid.length - 5);
var cover = news.cover.replace('!heading', '!slider');
addDownloadImage(news.id, cover, function(src) {
kr.updateNews(news.guid, src); //更新数据库
sliderImageEl.setAttribute('style', 'background-image: url("' + src + '");');
//console.log('slider downloaded image:::' + src);
});
})(news);
});
}
}
sliderImageEl.setAttribute('data-guid', news.guid);
sliderTitleEl.innerText = news.title;
};
function clearNewsList() {
newsEl.innerHTML = '';
};
function pullupRefresh(noHandlePullrefresh, clear) {
//console.log('pullup');
kr.getNews(latestPubDate, undefined, function(news) {
if (news && news.length > 0) {
if (clear) {
clearNewsList();
}
latestPubDate = news.item(news.length - 1).pubDate;
console.time("template");
for (var i = 0, len = news.length; i < len; i++) {
divEl.innerHTML = news_item(processNews(news.item(i)));
newsEl.appendChild(divEl.firstElementChild);
}
console.timeEnd("template");
if (!noHandlePullrefresh) {
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
}
}
else {
hasMore = false;
if (!noHandlePullrefresh) {
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
if (clear) {
clearNewsList();
}
}
console.timeEnd("进入页面到呈现");
}, function() {
if (!noHandlePullrefresh) {
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
}
});
}
</script>
</body>
</html>
