39,084
社区成员
发帖
与我相关
我的任务
分享iscroll 滑动不能 拉到最底端 始终在顶端
更具http://www.gafish.net/api/demo/pull-to-refresh/index.html这个 iScroll的拉动刷新例子
我套进自己的页面
滑动不能 拉到最底端 始终在顶端
问下各位大神 到底是什么问题 找个一上午 还是没找出问题来啊
求解答.........
我套进自己的页面
滑动不能 拉到最底端 始终在顶端
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../Public/css/jquery.mobile-1.3.1.min.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="../Public/lib/iscroll.js"></script>
<script src="../Public/lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../Public/lib/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="../cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="../Public/js/global.js"></script>
<style>
.nav_menu .ui-btn .ui-btn-inner{
padding-top:40px !important;
}
.nav_menu .ui-btn .ui-icon{
width:30px !important;
height:30px !important;
margin-left: -15px !important;
box-shadow:none !important;
-moz-box-shadow:none !important;
-webkit-box-shadow:none !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
}
.m_package .ui-icon{
background: url(../Public/css/images/menu-icon.png) -2px 1px no-repeat;
background-size: 319px 31px;
}
.m_news .ui-icon{
background: url(../Public/css/images/menu-icon.png) -228px 1px no-repeat;
background-size: 319px 31px;
}
.m_myaccount .ui-icon{
background: url(../Public/css/images/menu-icon.png) -174px 1px no-repeat;
background-size: 319px 31px;
}
.m_yourone .ui-icon{
background: url(../Public/css/images/menu-icon.png) -58px 1px no-repeat;
background-size: 319px 31px;
}
.m_more .ui-icon{
background: url(../Public/css/images/menu-icon.png) -288px 2px no-repeat;
background-size: 319px 31px;
}
@-webkit-keyframes loading {
from {
-webkit-transform:rotate(0deg)translateZ(0);
}
to {
-webkit-transform: rotate(360deg) translateZ(0);
}
}
</style>
</head>
<body>
<div data-role="page" data-theme="c" id="indexPage">
<div data-role="header" data-theme="b" data-position="fixed"><h1>融易</h1></div>
<div data-role="content" id="wrapper" class="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel"></span>
</div>
<ul id="contentList" data-role="listview" data-filter-theme="c" data-filter="ture" data-filter-placeholder="搜索，如编号/额度/存续期...">
<li data-role="list-divider" id="test1">正在申购
</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel"></span>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" class="nav_menu">
<div data-role="navbar" class="nav_menu">
<ul>
<li><a href="#package" class="ui-btn-active m_package" data-icon="custom" id="package">权益包</a></li>
<li><a href="#news" data-icon="custom" class="m_news" id="news">公告</a></li>
<li><a href="#myaccount" data-icon="custom" class="m_myaccount" id="myaccount">我的账户</a></li>
<li><a href="#yourone" data-icon="custom" class="m_yourone" id="yourone">融易</a></li>
<li><a href="#more" data-icon="custom" class="m_more" id="more">更多</a></li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var isInit = 0;
var myScroll, pullUpEl, pullUpOffset,pullDownEl, pullDownOffset, generatedCount = 0;
/* /**
* 上拉刷新
*/
function pullUpAction() {
setTimeout(function (){
$("#wrapper ul li#test1").after('<li><a href="#"><h3>编号：13123</h3>'+'<p>融资总额：<strong>1000万</strong> 存续期：<strong>20天</strong>'+'</p></a></li>');
$("#wrapper ul li#test1").after('<li><a href="#"><h3>编号：13123</h3>'+'<p>融资总额：<strong>1000万</strong> 存续期：<strong>20天</strong>'+'</p></a></li>');
$("#wrapper ul li#test1").after('<li><a href="#"><h3>编号：13123</h3>'+'<p>融资总额：<strong>1000万</strong> 存续期：<strong>20天</strong>'+'</p></a></li>');
//$("div[data-role=content] ul").listview('refresh');
myScroll.refresh();
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* 下拉刷新
*/
function pullDownAction() {
setTimeout(function (){
$("#wrapper ul li#test1").after('<li><a href="#"><h3>编号：13123</h3>'+'<p>融资总额：<strong>1000万</strong> 存续期：<strong>20天</strong>'+'</p></a></li>');
$("#wrapper ul li#test1").after('<li><a href="#"><h3>编号：13123</h3>'+'<p>融资总额：<strong>1000万</strong> 存续期：<strong>20天</strong>'+'</p></a></li>');
$("#wrapper ul li#test1").after('<li><a href="#"><h3>编号：13123</h3>'+'<p>融资总额：<strong>1000万</strong> 存续期：<strong>20天</strong>'+'</p></a></li>');
//$("div[data-role=content] ul").listview('refresh');
myScroll.refresh();
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* 初始化iScroll控件
*/
function loaded() {
if (myScroll != null) {
myScroll.destroy();
}
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
myScroll = new iScroll(
'wrapper',
{
useTransition : true, /* 此属性不知用意，本人从true改为false */
topOffset: pullDownOffset,
onRefresh : function() {
if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
}
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉加载更多...';
}
},
onScrollMove : function() {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉加载更多...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd : function() {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
pullUpAction(); // Execute custom function (ajax call?)
}
},
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
var startNum = -1;
var count = -1;
function loadData() {
showLoading();
var params = {
startNum : startNum,
count : count
};
$.ajax({
async : false,
url : serverURL + '/ajax!jqmMobileDemoList', // 跨域URL
type : 'get',
dataType : 'jsonp',
jsonp : 'jsoncallback', //默认callback
data : params,
timeout : 5000,
beforeSend : function() { //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了
},
success : function(json) { //客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数
$("#wrapper ul li#test1").after('<li><a href="#"><h3>编号：13123</h3>'+'<p>融资总额：<strong>1000万</strong> 存续期：<strong>20天</strong>'+'</p></a></li>');
$("#wrapper ul li#test1").after('<li><a href="#"><h3>编号：13123</h3>'+'<p>融资总额：<strong>1000万</strong> 存续期：<strong>20天</strong>'+'</p></a></li>');
$("#wrapper ul li#test1").after('<li><a href="#"><h3>编号：13123</h3>'+'<p>融资总额：<strong>1000万</strong> 存续期：<strong>20天</strong>'+'</p></a></li>');
$("div[data-role=content] ul").listview('refresh');
myScroll.refresh();
},
complete : function(XMLHttpRequest, textStatus) {
setTimeout(function() { // <-- Simulate network congestion, remove setTimeout from production!
myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
hideLoading();
if (startNum >= count) {
myAlert('已加载完全部信息');
pullUpEl = document.getElementById('pullUp');
pullDownEl = document.getElementById('pullDown');
pullUpEl.className = '';
pullDownEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '';
}
}, 1500);
},
error : function(xhr) {
//jsonp 方式此方法不被触发
//请求出错处理
myAlert("请求出错(请检查相关度网络状况.)");
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
</html>
问下各位大神 到底是什么问题 找个一上午 还是没找出问题来啊
求解答.........
...全文
请发表友善的回复…
发表回复
hq600 2015-11-13
- 打赏
- 举报
今天我也遇到了，我发现我的就是样式问题，我的wrapper的height设置成了100%。所以出现这个问题，把这个属性去掉了好了
my_cao 2015-10-19
- 打赏
- 举报
各位用的时候请先把样式设置好 切记 用不了的原因 很有可能就是样式问题
jasonbob 2015-06-03
- 打赏
- 举报
大哥，你这个问题解决了吗 什么情况啊 ，我也遇到同样问题了
业余草 2015-06-03
- 打赏
- 举报
你到底是先加载jquery还是../Public/lib/iscroll.js
看看http://www.360doc.com/content/14/0724/11/16276861_396699901.shtml
leizi929 2015-01-06
- 打赏
- 举报
请问 这个问题解决了吗，我也遇到这个问题
原来缘来 2013-08-05
- 打赏
- 举报
哈哈 firefox果然有bug,以前我总是做这类似的东西,发现无法彻底兼容firefox
ceyace 2013-07-31
- 打赏
- 举报
哥们你没wrapper scroller 类的css属性啊
iscroll有很多方法实现很多功能，比如滚动，拉动刷新，缩放等等。
本例将实现一个页面拉动刷新功能。
1.引入iscroll.js包
2.iscroll结构如下：
-
...
