背景：假设A界面是个主框架，里面有BC两个子界面。通过点击B界面的某个按钮（href方式）打开C界面，C界面只能下拉列表刷新，无法进行上拉加载更多的操作。
A界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">
<title>办事服务</title>
<link rel="stylesheet" href="../../libs/mui/css/mui.css" />
<!--<style>
html,
body {
background-color: #efeff4;
}
.mui-fadein {
/*-webkit-animation: fadein 0.1s;
animation: fadein 0.1s;*/
opacity: 1;
}
.mui-fadeout {
opacity: 0;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>-->
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" style="display: none;"></a>
<h1 id="title" class="mui-title"></h1>
</header>
<div class="mui-loader">加载中...</div>
<script type="text/javascript" src="../../libs/mui/js/mui.min.js" ></script>
<script type="text/javascript" src="../../libs/seajs/sea.js" ></script>
<script type="text/javascript" src="../../config/sea.config.js" ></script>
<script>
seajs.use("bafwBase");
</script>
</body>
</html>A界面JS
;define(function(require, exports, module){
var BASE = function(){};
BASE.prototype = {
init : function() {
mui.init({
subpages: [{
url: 'bsfw.html', //下拉刷新内容页面地址
id: 'bsfw.html', //内容页面标志
styles: {
top: '48px', //内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px；
bottom: '0px'
}
}]
});
var titleElem = document.getElementById("title")
var menu = document.getElementById("menu")
window.addEventListener("updateHeader", function(e) {
var title = e.detail.title;
var showMenu = e.detail.showMenu;
titleElem.innerHTML = title;
titleElem.className = "mui-title mui-fadein";
var display = showMenu ? "" : "none";
if (showMenu) {
mui.options.keyEventBind.menubutton = true;
} else {
mui.options.keyEventBind.menubutton = false;
}
menu.style.display = display;
});
var contentWebview = null;
document.getElementById("menu").addEventListener('tap', function(e) {
e.stopPropagation();
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS('mui("#topPopover").popover("toggle")');
});
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS('mui.scrollTo(0, 100)');
});
}
};
window.onload = function() {
var baseObj = new BASE();
baseObj.init();
};
});B界面
<!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 rel="stylesheet" href="../../libs/mui/css/mui.css" />
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li id="bsznBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="../bsfwBszn/bszn.html">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">办事指南</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email">
<div class="mui-media-body">网上申请</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">查询服务</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">办件公示</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">表格下载</div>
</a>
</li>
</ul>
</div>
<script type="text/javascript" src="../../libs/mui/js/mui.min.js" ></script>
</body>
</html>C界面：
<!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 rel="stylesheet" href="../../libs/mui/css/mui.css" />
<style>
#topPopover {
position: fixed;
top: 16px;
right: 6px;
}
#topPopover .mui-popover-arrow {
left: auto;
right: 6px;
}
.mui-popover {
width: 100px;
height: 300px;
}
</style>
</head>
<body>
<!--<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">办事指南</h1>
<a id="navRightBtn" href="#topPopover" class="mui-btn mui-btn-link mui-pull-right">治安</a>
</header>-->
<!--右上角弹出菜单-->
<div id="topPopover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="popview" class="mui-table-view">
</ul>
</div>
</div>
</div>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul id="datalist" class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
<script type="text/javascript" src="../../libs/mui/js/mui.min.js" ></script>
<script type="text/javascript" src="../../libs/seajs/sea.js" ></script>
<script type="text/javascript" src="../../config/sea.config.js" ></script>
<script>
seajs.use("bszn");
</script>
</body>
</html>
C界面JS
;
define(function(require, exports, module) {
var serverUrl = require("serverUrl");
var BSZN = function() {
};
BSZN.prototype = {
/**
* 初始化
*/
init: function() {
var that = this;
mui.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
down: {
contentdown: "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: that.pulldownRefresh
},
up: {
contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback: that.pullupRefresh
}
}
});
// 默认上拉刷新
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
//渲染弹出框
that.getDeptData();
// 弹出框的监听
that.listenPopoverView();
},
/**
* 获取部门列表数据
*/
getDeptData: function() {
var that = this;
mui.getJSON("bszn.json", null, function(data) {
that.renderPopoverView(data.deptList);
});
},
/**
* 渲染弹出框界面内容
* @param {Object} deptList
*/
renderPopoverView: function(deptList) {
var html = '';
for (var i = 0, len = deptList.length; i < len; i++) {
html += '<li class="mui-table-view-cell">';
html += deptList[i];
html += '</li>';
}
document.getElementById('popview').innerHTML = html;
},
/**
* popoverView的监听
*/
listenPopoverView: function() {
// 弹出菜单的监听
mui('.mui-scroll-wrapper').scroll();
mui('body').on('shown', '.mui-popover', function(e) {
// console.log('shown' + e.detail.id);//detail为当前popover元素
// 设置当前选中的标题
var rightBtnDom = document.getElementById('navRightBtn');
mui('.mui-popover').on('tap', 'li', function() {
rightBtnDom.innerText = this.innerText;
});
});
mui('body').on('hidden', '.mui-popover', function(e) {
// console.log('hidden' + e.detail.id);//detail为当前popover元素
});
},
/**
* 下拉刷新具体业务实现
*/
pulldownRefresh : function() {
console.log("下拉");
mui.ajax('bszn.json',{
data:{
'gesture':'pulldown'
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:5000,//超时时间设置为5秒；
success:function(data){
if(data.flag == 0) {
//TODO 数据为空的提示画面
} else {
// 数据列表
var resultlist = data.resultlist;
var table = document.getElementById('datalist');
for (var i=0, len=resultlist.length; i<len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + resultlist[i].servicename + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
mui('#pullrefresh').pullRefresh().refresh(true);
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}
});
},
/**
* 上拉加载具体业务实现
*/
pullupRefresh : function() {
console.log("上拉");
//serverUrl.bsfw.bsznDatalist
mui.ajax('bszn.json',{
data:{
'gesture':'pullup'
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:5000,//超时时间设置为5秒；
success:function(data){
if(data.flag == 0) {
//TODO 数据为空的提示画面
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //refresh completed
} else {
// 数据列表
var resultlist = data.resultlist;
var table = document.getElementById('datalist');
for (var i=0, len=resultlist.length; i<len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">' + resultlist[i].servicename + '</a>';
table.appendChild(li);
}
mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //refresh completed
}
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //refresh completed
}
});
}
};
window.onload = function() {
var bsznObj = new BSZN();
bsznObj.init();
};
});
荼蘼 (作者)
好的，发你Q么？
2015-03-24 15:40