apicloud中提供下拉刷新监听事件api，也提供滚动到底部事件的监听，能够实现下拉刷新和滚动到底部加载更多功能，但是我们真的就满足实现功能了吗？将两个代码拼凑起来运行看看发现了什么？是的，在滚动到底部加载更多的时候底部会弹动，有人可能会说触发加载更多的时候直接放一个遮罩view，也就是progress，用来禁止用户继续对当前view产生触摸事件就行，但是如果你很快滑动到底部呢，弹动现象仍然不能禁止。我曾向技术多次提过在下拉刷新api中提供一个参数用来控制是否禁用底部弹动的，但是前几次技术都是不了了之，最近又问了一次，直接回应“目前市面上有APP是这种效果吗？底部弹动，主要是拟物，跟手，你不喜欢这种效果，不代表每个人都不喜欢。”，我只想说，我又没叫你去掉弹动，只是加一个属性控制是否弹动，这和别人是否喜欢有什么关系，而且尽然还说现在市场的app有这种效果吗？可能我已经脱离了市场轨道。好了，发发牢骚而已，这里不谈技术人员的态度问题，下面分享下我如何实现优雅控制的：
对于这个问题我想过很多种办法，原本想是否改写官方底层来实现，但是尝试了一下放弃了（好吧，我承认是我太水，没改的了），因为就算我把Android改了，那IOS呢，apicloud引擎又没有开源，IOS同样无法实现，那又有什么意义，我想应该有很多人都纠结这个问题，那么到底怎么解决呢？
首先apicloud提供了设置页面bounces的方法，能否从这方面下手，动态改变其bounces状态，在具有下拉意图的时候开启bounces,在具有上拉加载更多意图的时候禁用bounces。但是如何判断意图呢，最初的设想是监听scrolltobottom方法来控制，放滚动到距离底部还有50dp的时候来禁用bounces，在距离顶部50dp（通过计算成距离底部距离）的时候开启bounces，但是发现scrolltobottom有些问题：1、只能监听一个，不能任性的监听，后面的会覆盖前面的。2、滚动到距离底部50dp的时候触发事件，但是滚动到距底部0dp的时候再向下滚任然会触发该事件，这应该是一个bug。原生api使用不了，那js是否提供方法呢，都知道我们的开始使用的是webview，虽然Java可以直接调用webview的原生方法，但是js也可以操作webkit的事件，其中就有onscroll事件，这个是网页滚动的事件。能否通过这个方法来改变bounces呢，试验了一下，还真可以，总体方法就是在使用原生下拉刷新与scrolltobottom监听滚动到底部的同时，使用js监听页面滚动事件，在滚动条距离顶部30像素位置上下分别改变bounces状态。
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="target-densitydpi=device-dpi,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>内容页</title>
<link rel="stylesheet" type="text/css" href="css/ui-base.css" />
<link rel="stylesheet" type="text/css" href="css/ui-box.css" />
<link rel="stylesheet" type="text/css" href="css/ui-color.css" />
<link rel="stylesheet" type="text/css" href="css/ui.control.css" />
<link rel="stylesheet" type="text/css" href="css/load_more.css" />
<style>
html,body{
width:100%;
height:100%;
}
</style>
</head>
<body class="um-vp">
<div id="page_0" class="up ub ub-ver">
<div id="content" class="ub ub-ver" style="min-height: 300px;">
</div>
<div id="loading" class="ub ub-ver" style="background:rgba(0,0,0,0.2);margin-top:5px"></div>
</div>
</body>
<script type="text/javascript" src="./script/zepto.min.js"></script>
<script src="script/api.control.js"></script>
<script src="script/templete/template.js"></script>
<script src="script/ui.widget/ui.listview.js"></script>
<script src="script/zepto.widget/zepto.nodata.js"></script>
<script>
;(function($){
$(function () {
var con={
listview: $.listview({
selector: "#content",
type: "thickLine",
hasAngle: false,
hasIcon: false,
hasSmallIcon:false,
multiLine: 1,
}),
pageindex:0,
items:20,
hasmore:false,
times:0,
isloading:false,
getData:function(){
var self=this;
$("#content").empty();
$("#loading").empty();
var data=[];
switch (self.times){
case 0://无数据
break;
case 1://5条数据，不足一个屏幕
for(var i=0;i<5;i++){
data.push({
title:"测试数据1"
});
}
break;
case 2://15条数据，超过一个屏幕，但是不足20条，没有加载更多
for(var i=0;i<15;i++){
data.push({
title:"测试数据2"
});
}
break;
case 3://20条，表示可能有更多数据
for(var i=0;i<20;i++){
data.push({
title:"测试数据3"
});
}
break;
}
if(data.length>0){
self.listview.add(data,1);
}
self.logic(data);
if(self.times>=3){
self.times=0;
}else{
self.times++;
}
},
logic: function(data) {
var self = this;
var boxdom=$("#content");
if (boxdom.children().length == 0&&data.length==0) { //从无数据开始
boxdom.nodata();
}else{
if (data.length == 0) {
self["hasmore"]= false;
if($("#content").find(".ui-nodata")){
//如果已经显示无数据则不进行append操作
}else{
$("#loading").empty().append(‘<div class="loading_more pause"><div id="loadingglobe" class="sk-spinner sk-spinner-wordpress uhide"><span class="sk-inner-circle"></span></div></div>‘);
}
return;
} else {
if (boxdom.offset().height > document.body.clientHeight) {
if(data.length<self.items){
self["hasmore"]= false;
$("#loading").empty().append(‘<div class="loading_more pause"><div id="loadingglobe" class="sk-spinner sk-spinner-wordpress uhide"><span class="sk-inner-circle"></span></div></div>‘);
}else{
self["hasmore"]= true;
$("#loading").empty().append(‘<div class="loading_more"><div id="loadingglobe" class="sk-spinner sk-spinner-wordpress uhide"><span class="sk-inner-circle"></span></div></div>‘);
}
}
}
}
},
loadData: function () {
var self=this;
var data=[{
title:"测试数据4",
},{
title:"测试数据4",
}];
self.listview.add(data,1);
self.logic(data);
self.isloading=false;
},
init: function () {
var bounce=true,self=this;
$.apiready(function () {
api.setRefreshHeaderInfo({
visible: true,
bgColor: ‘#ccc‘,
textColor: ‘#fff‘,
textDown: ‘下拉刷新...‘,
textUp: ‘松开刷新...‘,
showTime: true
}, function(ret, err){
setTimeout(function () {
self.getData();
api.refreshHeaderLoadDone();
},2000)
});
api.addEventListener({
name:‘scrolltobottom‘,
extra:{
threshold:0
}
},function(ret,err){
if(self.hasmore&&!self.isloading){
$("#loadingglobe").removeClass("uhide");
$("#loading .loading_more").addClass("active");
self.isloading=true;
setTimeout(function () {
self.loadData();
},3000)
}
});
$.showProgress();
setTimeout(function () {
self.getData();
$.closeProgress();
},3000)
});
window.addEventListener("scroll",function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
if(t<=30){
if(!bounce){
api.setFrameAttr({
name: ‘con‘,
bounces: true,
});
bounce=true;
}
}else{
if(bounce){
api.setFrameAttr({
name: ‘con‘,
bounces: false,
});
bounce=false;
}
}
});
}
};
con.init();
})
})(Zepto)
</script>
</html>
具体体验效果可以下载使用：
在Appcan论坛中也有人曾经问过如何实现的，希望能够参考一下实现，或许有人说使用js监听滚动事件是不是会影响webiew效率，此处不做研究，以后会做优化调整