iscroll 上拉下拉刷新AJAX后，样式有问题
<a data-traceid="question_detail_above_text_l&&
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0&&
&meta name=&apple-mobile-web-app-capable& content=&yes&&
&meta name=&apple-mobile-web-app-status-bar-style& content=&black&&
&title&iScroll demo: simple&/title&
&script type=&text/javascript& src=&js/iscroll.js&&&/script&
&script type=&text/javascript& charset=&utf-8& src=&js/jquery-1.7.2.min.js&&&/script&
&script type=&text/javascript& charset=&utf-8& src=&js/jquery-1.9.1.js&&&/script&
&script type=&text/javascript&&
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
function pullDownAction () {// 这个函数是下拉刷新，但是刷新后样式有问题，高度不变，滚动条拉到底部了，内容却没有达到底部。
setTimeout(function () {//如果去掉$.ajax后换成其他的循环函数，正常。
var el, li,
el = document.getElementById('thelist');
$.ajax({ 从该处获取数据
dataType:'jsonp',
success:function(data){
for (i=0;i&5;i++)
&&&&&&&&&{
var time = getLocalTime(data[i]['pub_time']);
li = document.createElement('li');
&&&&&&&&&&&&&&&&&&li.innerHTML = &&a href='news.html?news_id=&+data[i]['news_id']+&'&&+data[i]['title']+&&/a&&+
el.insertBefore(li, el.childNodes[0]);
}//;success不能跟分号
});myScroll.refresh();}, 1000);
function pullUpAction () {
setTimeout(function () {
var el, li,
el = document.getElementById('thelist');
for (i=0;i&5;i++ )
{li = document.createElement('li');
li.innerHTML = 'Generated row ' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
};myScroll.refresh();}, 1000);
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetH
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetH
myScroll = new iScroll('wrapper', {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
onScrollMove: function () {
if (this.y & 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y & 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownO
} else if (this.y & (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
this.maxScrollY = this.maxScrollY;
} else if (this.y & (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
this.maxScrollY = pullUpO
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
pullUpAction(); // Execute custom function (ajax call?)
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
&script type=&text/javascript& charset=&utf-8&&
//函数：将时间戳变成日期形式
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
//获取数据
function xunlei(){
var el, li, i,option,
el = document.getElementById('thelist');
url:'http://202.198.133.181/android/andrew2/jsonp2.php?callback=?',//从该处获取数据
dataType:'json',
success:function(data){
for (i=0;i&20;i++)
li = document.createElement('li');
var time = getLocalTime(data[i]['pub_time']);
li.innerHTML = &&a href='news.html?news_id=&+data[i]['news_id']+&'&&+data[i]['title']+&&/a&&+
el.appendChild(li, el.childNodes[0]);
}//;success不能跟分号
&script type=&text/javascript&&
window.onload =
&style type=&text/css& media=&all&&
padding:0;
padding:0;
width:100%;
text-overflow:
white-space:
font-size:12
-webkit-user-select:
-webkit-text-size-adjust:
font-family:
position: z-index:2;
top:0; left:0;
width:100%;
line-height:45
background-color:#d51875;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding:0;
font-size:20
text-align:
#header a {
color:#f3f3f3;
text-decoration:
font-weight:
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
position: z-index:2;
bottom:0; left:0;
width:100%;
background-color:#222;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
padding:0;
border-top:1px solid #444;
#wrapper {
position: z-index:1;
top:45 bottom:48 left:-9999
width:100%;
background:#
#scroller {
position: z-index:1;
/* -webkit-touch-callout:*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
#scroller ul {
list-style:
padding:0;
width:100%;
text-align:
#scroller li {
padding:0 10
line-height:40
border-bottom:1px solid #
border-top:1px solid #
background-color:#
font-size:14
#myFrame {
top:0; left:0;
* Pull down styles
#pullDown, #pullUp {
background:#
line-height:40
padding:5px 10
border-bottom:1px solid #
font-weight:
font-size:14
color:#888;
#pullDown .pullDownIcon, #pullUp .pullUpIcon
display: float:
width:40 height:40
background:url(pull-icon@2x.png) 0 0 no-
-webkit-background-size:40px 80 background-size:40px 80
-webkit-transition-property:-webkit-
-webkit-transition-duration:250
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
#pullUp .pullUpIcon
-webkit-transform:rotate(-180deg) translateZ(0);
#pullDown.flip .pullDownIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
#pullUp.flip .pullUpIcon {
-webkit-transform:rotate(0deg) translateZ(0);
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:0 100%;
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0
-webkit-animation-name:
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:
-webkit-animation-timing-function:
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
&div id=&header&&&a href=&http://cubiq.org/iscroll&&iScroll&/a&&/div&
&div id=&wrapper&&
&div id=&scroller&&
&div id=&pullDown&&
&span class=&pullDownIcon&&&/span&&span class=&pullDownLabel&&Pull down to refresh...&/span&
&ul id=&thelist&&
&div id=&pullUp&&
&span class=&pullUpIcon&&&/span&&span class=&pullUpLabel&&Pull up to refresh...&/span&
&div id=&footer&&
这个例子是网上比较常见的，下过来的时候，上拉下拉刷新都是添加的静态元素，我添加ajax后，就出现了样式问题，刷新后滚动条长度不变，但是内容长度变了，达不到底部。得改变下浏览器高度才能使滚动条正常。。不知道什么原因。
急需大神求解！谢谢！给个思路也行
在myScroll.refresh();}, 1000);后面
添加$(&#add&).listview(&refresh&);
li.innerHTML = &&a href='news.html?news_id=&+data[i]['news_id']+&'&&+data[i]['title']+&&/a&&+&这个怎么添加&a&标签后刷新不出数据来？？？
我也遇到过，把ajax设置成同步就行了。$.ajax({async : false,）
--- 共有 2 条评论 ---
此答案是对的。谢谢啊！
此方法可以.
的方法可以，这是什么原因导致的呢？求解。
你设置iscroll 的外框高度 #wrapper 为window.innerHeight(当前手机端的设备高度值)；就解决问题了
--- 共有 1 条评论 ---jquery ajax多次请求数据时 不刷新问题的解决方法
转载 &更新时间：日 08:10:46 & 投稿：jingxian
下面小编就为大家带来一篇jquery ajax多次请求数据时 不刷新问题的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery的ajax在频繁请求数据，或者重复请求数据的时候出现了一个情况，那就是非ie浏览器正常，ie浏览器会设置缓存，导致第二次请求的时候不会刷新，系统报304 not modify，
解决方案：
jquery的ajax方法提供配置参数:cache,(只需将属性设置为false即可)
cache：Boolean
默认： true, dataType为"script"和"jsonp"时默认为false如果设置为 false ，浏览器将不缓存此页面。
以上就是小编为大家带来的jquery ajax多次请求数据时 不刷新问题的解决方法全部内容了，希望大家多多支持脚本之家~
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具个回答我总是用这个，效果很好。$(document).ready(function(){
$(function(){
$(&#x27;#ideal_form&#x27;).submit(function(e){
e.preventDefault();
var form = $(this);
var post_url = form.attr(&#x27;action&#x27;);
var post_data = form.serialize();
$(&#x27;#loader3&#x27;, form).html(&#x27;&img src=&../../images/ajax-loader.gif& /&
Please wait...&#x27;);
type: &#x27;POST&#x27;,
url: post_url,
data: post_data,
success: function(msg) {
$(form).fadeOut(800, function(){
form.html(msg).fadeIn().delay(2000);
});$(&#mydiv&).load(location.href + & #mydiv&);扫描二维码扫描关注云+社区AJAX的刷新和前进后退问题解决
使用AJAX开发分页功能的时候，用户跳转到第5页，但是刷新以后又显示第一页了，能不能刷新后还显示第5页？还有能不能用浏览器的前进后退按钮来浏览AJAX历次的变化。因为Javascript对dom的操作是不持久化的，刷新后就恢复原状，而且也不保存历史记录，也就无法前进后退来查看历史了。但是可以采用“地址栏加hash”技术来解决。地址栏中敲入“页面地址#aaa”就表示跳转到“页面地址 ”的“aaa”这个页内锚点（英文叫做hash）。只要改变“aaa”这个锚点内容，浏览器就认为URL变化，也就会放入浏览历史，这样前进后退问题就解决了。我们只要把不同的AJAX状态通过不同的hash写到地址栏就可以了，当页面加载的时候检测是否有hash值，有的话就读取hash进行相应的ajax还原操作。location.hash可以取到或者设置hash的值，当hash改变的时候window.onhashchange事件会被触发，但是页面加载的时候哪怕有hash值，onhashchange事件也不会触发，因此需要在onload事件中也读取hash进行同样的处理，保证刷新页面也能恢复ajax的页面显示。下面是例子代码，为了简单的突出问题，这里没有使用ajax，只是通过dom来修改页面状态。点击文本框，文本框的内容会加1（注意观察地址栏），刷新页面后值也还是增加后的值，而且页面可以前进后退。代码如下：
原文地址：http://blog.csdn.net/resigshy/article/details/8046595
实现不刷新整个页面进行前进后退
解决H5页面浏览器返回或前进时ajax不能重新加载数据的问题
ajax技术如何解决浏览器前进后退按键失效的问题
Ajax局部页面刷新和history的坑
解决Ajax框架下页面回退刷新问题
ajax回调函数中刷新页面方法
Ajax实现动态刷新页面（get）
ajax返回html刷新整个页面
HTML中使用Ajax进行局部刷新页面
jquery ajax无刷新更新页面
没有更多推荐了，我用ajax做的无刷新分页，有个问题就是点了链接后再后退回来还是第一页，这个怎么解决_百度知道
我用ajax做的无刷新分页，有个问题就是点了链接后再后退回来还是第一页，这个怎么解决
比如我在那个分页的页面在浏览第五页，然后点了链接到别的页面去了，再点后退就是第一页了，怎么能使他还是第五页我这样的分页不能用session的，在页面上做个标记的话后退回来还是分页...
比如我在那个分页的页面在浏览第五页，然后点了链接到别的页面去了，再点后退就是第一页了，怎么能使他还是第五页我这样的分页不能用session的，在页面上做个标记的话后退回来还是分页页面一开始载入的值，我都试过了，我看过QQ空间日志的也是无刷新的分页，也有这个问题
&#xe6b9;答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
FantasyChump
FantasyChump
采纳数：1028
获赞数：3033
比较好的方法是用location.hash 来记录，比如你在分到第五页的时候，先用js动态修改当前网址为第五： location.hash=&5&; 这样的操作不会导致页面刷新，但是却会被记录到浏览器历史里面。等到返回上一页等操作的时候，在加载初始化数据之前，先看看有没有location.hash，有的话就从里面恢复当前的页码，否则就加载第一页。
lietou1986
lietou1986
采纳数：207
获赞数：769
ajax引起的典型问题
peiyanfei2008
peiyanfei2008
采纳数：27
获赞数：43
使用url加参数 定位到具体页面
采纳数：33
获赞数：73
不能用session那就用Cookie啊......是不？
其他1条回答
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。