其实还是以前的老问题, 我一个首页,里面预加载了3个页面(每个页面有一个子页面)
每个页面都是双webview做下拉刷新的.
现在这3个页面有时候能下拉,有时候子页面下拉只能下拉一点点.退出程序,再进,又好了,然后问题又会再次出现,我现在不清楚具体产生的问题,我也是按照DEMO里面的父子刷新来做的.
附上图片可能更直观展示问题
我勒个去
- 发布：2015-12-14 09:42
- 更新：2017-03-15 23:07
- 阅读：2968
我勒个去 (作者)
<!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" />
<title>我的收藏-子(列表)</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="../../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../../css/app.css" />
<style>
#topPopover {
position: fixed;
top: 0px;
}
body {
font-size: 15px;
}
.mui-table-view-cell.mui-collapse .mui-collapse-content {
position: relative;
display: none;
overflow: hidden;
margin: 11px -15px -11px;
padding: 0px 0px;
-webkit-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
background: white;
}
.mui-table-view-cell.mui-active {
background-color: #CCCCCC;
}
.mui-popover {
height: 90px;
width: 100%;
border-radius: 0px;
}
</style>
</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh3" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="list" class="mui-table-view">
<div></div>
<script id="tListTempl" type="text/html">
{{if total > 0}} {{each data as list}}
<li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<a data-action="more" data-id="{{list.t_id}}" class="mui-btn mui-btn-grey">更多</a>
<a data-action="completed" data-id="{{list.t_id}}" class="mui-btn mui-btn-red">已完成</a>
</div>
<a data-action="view" data-id="{{list.t_id}}" class="mui-slider-handle">
{{if list.t_delete == 1}}
<del>{{list.t_title}}</del>
{{else}}
{{list.t_title}}
{{/if}}
<span class="mui-pull-right mui-h6">{{list.t_createTime.substring(0,10)}}</span>
</a>
</li>
{{/each}} {{else}}
<li class="mui-table-view-cell">
<span class="mui-h5">暂无任务</span>
</li>
{{/if}}
</script>
</ul>
</div>
</div>
<script id="pListTempl" type="text/html">
{{if total > 0}} {{each data as plist}}
<li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<a data-action="more" data-id="{{plist.p_id}}" class="mui-btn mui-btn-grey">更多</a>
<a data-action="completed" data-id="{{plist.p_id}}" class="mui-btn mui-btn-red">已完成</a>
</div>
<a data-action="view" data-id="{{plist.p_id}}" class="mui-slider-handle">
{{if plist.p_deltag == 1}}
<del>{{plist.p_title}}</del>
{{else}}
{{plist.p_title}}
{{/if}}
<span class="mui-pull-right mui-h6">{{plist.p_createTime.substring(0,10)}}</span>
</a>
</li>
{{/each}} {{else}}
<li class="mui-table-view-cell">
<span class="mui-h5">暂无收藏的项目</span>
</li>
{{/if}}
</script>
<!---////////下拉菜单------>
<div id="topPopover" class="mui-popover">
<!--<div class="mui-popover-arrow"></div>-->
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-radio" id="selTask">
<li class="mui-table-view-cell"><a class="mui-navigate-right" data-type="task">收藏的任务</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right mui-h4" data-type="project">收藏的项目</a></li>
</ul>
</div>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/template.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
pullRefresh: {
container: '#pullrefresh3',
down: {
callback: pulldownRefresh
}
}
});
var favorite_type = "task"; //默认显示的收藏
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
var List = document.getElementById("list");
var userinfo = JSON.parse(localStorage.getItem("userInfo"));
favorite_type == "task" ? "task" : "project";
setTimeout(function() {
mui.ajax("http://task.cxjky.com/app/myFavorites", {
data: {
userCode: userinfo.LOGINID,
favorite_type: favorite_type
},
dataType: 'json', //服务器返回json格式数据
type: 'GET', //HTTP请求类型
timeout: 5000, //超时时间设置为5秒；
success: function(data) {
if (favorite_type == "task") {
var templ = "tListTempl";
} else {
var templ = "pListTempl";
}
var html = template(templ, data);
List.innerHTML = html;
//mui.toast("更新了");
mui('#pullrefresh3').pullRefresh().endPulldownToRefresh(); //refresh completed
},
error: function(xhr, type, errorThrown) {
//异常处理
mui.toast("服务器异常,请稍后再试");
console.log("异常" type);
mui('#pullrefresh3').pullRefresh().endPulldownToRefresh();
}
});
},100);
}
/**
* 查看任务
* @param {Object} id
*/
function viewTask(id) {
plus.webview.getWebviewById("view_task").show('pop-in', 300, function() {
//回调函数,初始化新建任务页面的事件
mui.fire(plus.webview.getWebviewById("view_task"), "initPage", {
task_id: id
});
});
}
/**
*
* @param {Object} elem
* 任务动作
*/
function TaskAction(elem) {
var action = elem.getAttribute("data-action");
var id = elem.getAttribute("data-id");
console.log("任务列表 动作" action);
if (action == "more") {
openSheet(elem, id);
} else if (action == "view") {
viewTask(id);
} else if (action == "archive") {
changeTaskStatus(id, 4);
} else if (action == "completed") {
changeTaskStatus(id, 3);
} else {
mui.toast("功能选择错误");
}
}
/**
* 改变任务
* @param {Object} id
* @param {Object} statusid
*/
function changeTaskStatus(id, statusid) {
mui.getJSON("http://task.cxjky.com/app/changeTaskStatus", {
task_id: id,
task_status: statusid
}, function(data) {
if (data.status == "00") {
mui.toast(data.message);
pulldownRefresh();
}
});
}
/**
* 删除一个任务
* @param {Object} id
*/
function deleteTask(id) {
mui.getJSON("http://task.cxjky.com/app/deleteTask", {
task_id: id
}, function(data) {
if (data.status == "00") {
mui.toast(data.message);
pulldownRefresh();
}
});
}
/**
* 收藏任务
* @param {Object} id
*/
function favoriteTask(id) {
var userinfo = JSON.parse(localStorage.getItem("userInfo"));
mui.getJSON("http://task.cxjky.com/app/Favorite", {
task_id: id,
userCode: userinfo.LOGINID
}, function(data) {
if (data.status == "00") {
mui.toast(data.message);
//pulldownRefresh();
} else {
mui.toast(data.message);
}
});
}
function openSheet(elem, id) {
var li = elem.parentNode.parentNode;
var userinfo = JSON.parse(localStorage.getItem("userInfo"));
var btnArray = [{
title: "删除",
style: "destructive"
}, {
title: "收藏"
}];
plus.nativeUI.actionSheet({
//title:"选择照片",
cancel: "取消",
buttons: btnArray
}, function(e) {
console.log(e.index " " id);
var index = e.index;
if (index == 1) {
deleteTask(id);
} else if (index == 2) {
favoriteTask(id);
mui.swipeoutClose(li);
} else {
mui.swipeoutClose(li);
}
});
}
mui("#list").on("tap", "a", function() {
var elem = this;
TaskAction(elem);
});
/**
* 任务类型选择事件
*/
mui("#selTask").on("tap", "a", function() {
var fType = this.getAttribute("data-type");
favorite_type = fType;
mui('.mui-popover').popover('toggle');
mui('#pullrefresh3').pullRefresh().pulldownLoading();
});
function shuaxin() {
setTimeout(function() {
mui('#pullrefresh3').pullRefresh().pulldownLoading();
}, 500);
}
if (mui.os.plus) {
mui.plusReady(function() {
shuaxin();
window.addEventListener("refresh",pulldownRefresh);
});
} else {
mui.ready(function() {
//mui('#pullrefresh').pullRefresh().pulldownLoading();
});
}
</script>
</body>
</html>我勒个去 (作者)
<!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" />
<title>我的任务-父</title>
<link href="../../css/mui.min.css" rel="stylesheet" />
<style>
.mui-bar .mui-pull-left .mui-icon {
padding-right: 5px;
font-size: 19px;
}
.mui-bar .mui-btn {
font-weight: normal;
font-size: 17px;
}
.mui-bar .mui-btn-link {
top: 1px;
}
header{
background: -webkit-linear-gradient(top,rgba(1,159,222,1),rgba(1,159,222,0.8));
}
header .mui-title {
color: #FFF;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<button type="button" style="color: #FFF;" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav" ></span>我的
</button>
<!--<a class="mui-action-back mui-icon mui-icon-back mui-pull-left mui-icon-left-nav"></a>-->
<a style="color: #FFF;" id="addTask" class="mui-action-menu mui-icon mui-icon-plus mui-pull-right"></a>
<h1 class="mui-title" id="Taskpop">任务列表<div class="mui-icon mui-icon-arrowdown" style="font-size: 15px;"></div></h1>
</header>
<div class="mui-content"></div>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
//双击监听
/*gestureConfig:{
doubletap:true
},*/
subpages: [{
url: 'task_list.html',
id: 'task_list',
styles: {
top: '45px',
bottom: '0px',
}
}]
});
function init_Page() {
//初始化该页面所需页面,比如预加载或者赋值等情况
mui.preload({
"id": 'new_task',
"url": '../../public/new_task.html',
styles: {
popGesture: 'hide',
//bounce: 'all',
zindex: 1,
}
});
}
function newTask() {
plus.webview.getWebviewById("new_task").show( 'pop-in', 300, function(){
//回调函数,初始化新建任务页面的事件
var open_wv = plus.webview.getWebviewById("new_task");
var userinfo = JSON.parse(localStorage.getItem("userInfo"));
mui.fire(open_wv,"initPage");
mui.fire(open_wv,"changeProject",{project_id: 0,project_name: "个人项目",sort_id: 0,sort_name: "默认分类",status_id: 1,status_name: "待处理"});
mui.fire(open_wv,"choose_employee_radio",{choose_loginid: userinfo.LOGINID,choose_name: userinfo.LASTNAME});
});
}
mui.plusReady(function() {
document.getElementById("addTask").addEventListener("tap",newTask);
mui.back = function(event) {
//关闭预加载的页面, 新建任务 查看任务
var newTask_wv = plus.webview.getWebviewById("new_task");
//var viewTask_wv = plus.webview.getWebviewById("view_task");
var taskMain_wv = plus.webview.currentWebview();
plus.webview.close(newTask_wv);
//plus.webview.close(viewTask_wv);
taskMain_wv.hide("auto", 300);
}
});
/**
* 监听初始化页面事件
*/
window.addEventListener("initPage",function(){
init_Page();
list_wv = plus.webview.getWebviewById("task_list");
//list_wv.evalJS("mui('#pullrefresh2').pullRefresh().pulldownLoading()");
list_wv.evalJS("shuaxin()");
});
/**
* 选择任务类型点击事件
*/
document.getElementById("Taskpop").addEventListener("tap",function(){
list_wv = plus.webview.getWebviewById("task_list");
list_wv.evalJS("mui('.mui-popover').popover('toggle')");
});
</script>
</body>
</html>我勒个去 (作者)
@且听风吟
这只是一个下拉刷新页面
这个页面的上一级页面 会打开类似的3个下拉刷新, 出现的问题会 有时候怎么测试都是好的,有时候会偶尔一个不好,有时候偶尔两个,三个都不好,
有个有趣的问题,就是这个页面的上一级页面,也是下拉刷新的,我怎么拉,他都是正常的.
(其它三个页面的内容都是ajax数据输出的)
这个是上一级页面
我也遇到了类似的问题。两个tab 各自用自己的 webview, 每个 webview 用双 webview 方式实现下拉刷新，第二个tab 的下拉刷新总是被内容遮住一部分。而且很少情况下又是正常的。
希望有人可以指导下方向。
另外在 安卓 上，我发现
console.log(document.querySelector('.mui-pull-top-pocket').innerHtml为 null
但是在 ios 上，则是
<div class="mui-pull"><div class="mui-pull-loading mui-icon mui-icon-pulldown"></div><div class="mui-pull-caption">下拉可以刷新</div></div>
这样在 安卓 上该如何自定义样式呢？
