首页 新闻 搜索 专区 学院

一个加载更多的消息列表,点击任意一条进去,返回还在原来的地方,页面不刷新

0
悬赏园豆:30 [已解决问题] 解决于 2017-05-14 12:25

http://m.hyjianmei.com/products_detail/&productId=17.html 类似这个网址的效果,不停的点击加载更多,返回时还在原来点击进入的地方,sessionStorage或localStorage,详细代码

忆时笙安的主页 忆时笙安 | 初学一级 | 园豆:12
提问于:2016-12-30 15:44
< >
分享
最佳答案
0

你是不是在进入页面的时候就默认新加载了所有的数据? 如果你要实现你说的那种效果的话,返回的时候不要刷新数据就不会回到第一页了。还有你那个页数也不能每次进入页面就初始化,不然数据会乱。我是开发移动端的,所以你说的代码不会写,只能告诉你思路了。

收获园豆:30
青语 | 小虾三级 |园豆:1000 | 2017-01-03 10:09
其他回答(2)
0

用本地存储记录一下进入之前该页面的相关状态,比如页次,滚到什么地方,等回来的时候根据这些数据还原现场。

terry59599s | 园豆:202 (菜鸟二级) | 2016-12-30 17:26

道理我知道,我不会写代码,特来求助

支持(0) 反对(0) 忆时笙安 | 园豆:12 (初学一级) | 2016-12-30 17:28

@忆时笙安: 木有代码,有思路啥都好办,代码哪里不懂搜哪里,比如不知道怎么用js滚动到相应的位置,查一下就好了。

支持(0) 反对(0) terry59599s | 园豆:202 (菜鸟二级) | 2016-12-30 17:33
0

类似今日头条,根据滑动窗口的高度获取数据

<content id="pageletListContent" class="feed-list-container">

<div class="list_content" id="divListContent">

<section class="middle_mode has_action">

<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=1&amp;sn=cf905ddd3cda53cac1eab3200d89912c&amp;chksm=bd52e9468a2560504536d6ca10f88ebed8230c7fcfe77c1ba8935910d162c34ffd91674bcf79#rd" class="article_link clearfix">

<div class="desc">

<h3 class="dotdot line3 image-margin-right">为了在上海的3.8万人,这个奥运冠军帮他们做了一件事</h3>          

<div class="item_info">

<span class="src space">一条</span>

<span class="cmt space">评论&nbsp;325</span>

<span class="dislike-news mid-space fr"></span>

</div>        

</div>

<div class="list_img_holder">

<img src="./头条_files/28558-239e811d98d117f6294423e575e44274">            

</div>     

</a> 

<div class="one-px-border"></div>

</section>

 

<section class="middle_mode has_action">

<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=2&amp;sn=36c49da24a9fc753e125be510ca63fc5&amp;chksm=bd52e9468a2560500f32522181f38d488298b2c47eb07e05770ac4e52c9866554226b690d6ec#rd" class="article_link clearfix">

<div class="desc">

<h3 class="dotdot line3 image-margin-right">爱她,就让她每一寸肌肤享受这种触感</h3>          

<div class="item_info">

<span class="src space">一条</span>

<span class="cmt space">评论&nbsp;42</span>

<span class="dislike-news mid-space fr"></span>

</div>        

</div>

<div class="list_img_holder">

<img src="./头条_files/28558-6724bc70a04829d97641af9cb26a81ef">            

</div>     

</a> 

<div class="one-px-border"></div>

</section>

 

<section class="middle_mode has_action">

<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=3&amp;sn=2ba6bc6d1f866d92123b78a1ff8ab3ae&amp;chksm=bd52e9468a2560501b8bf6d3aeba8e7bf4642d3243fc1fb889dd2648fbc3b000221fc44a808d#rd" class="article_link clearfix">

<div class="desc">

<h3 class="dotdot line3 image-margin-right">超轻、好走又好看的健步鞋,真是国货良心</h3>          

<div class="item_info">

<span class="src space">一条</span>

<span class="cmt space">评论&nbsp;36</span>

<span class="dislike-news mid-space fr"></span>

</div>        

</div>

<div class="list_img_holder">

<img src="./头条_files/28558-9c32f257dbb4d27fb10aa03fa653f915">            

</div>     

</a> 

<div class="one-px-border"></div>

</section>

 

<section class="middle_mode has_action">

<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=4&amp;sn=073260a685c1f724be4f843989a4c4cc&amp;chksm=bd52e9468a256050c97549bd175f74d85483858b6228d7204677a82ce3ca51ac72e21c137f44#rd" class="article_link clearfix">

<div class="desc">

<h3 class="dotdot line3 image-margin-right">用了它,才知道这些年的牙都白刷了</h3>          

<div class="item_info">

<span class="src space">一条</span>

<span class="cmt space">评论&nbsp;35</span>

<span class="dislike-news mid-space fr"></span>

</div>        

</div>

<div class="list_img_holder">

<img src="./头条_files/28558-5a4a22a6a2915df96e90b9913e8e6a52">            

</div>     

</a> 

<div class="one-px-border"></div>

</section>

 

<section class="middle_mode has_action">

<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=5&amp;sn=570d001fed931dfe5d9fdac9d2c67530&amp;chksm=bd52e9468a256050abf9a0335f271c2338dc43168f705ed2d1acf48133b2e27a870ad8f5fd53#rd" class="article_link clearfix">

<div class="desc">

<h3 class="dotdot line3 image-margin-right">哈佛大学出版社的镇社之宝,竟是一套中国史!</h3>          

<div class="item_info">

<span class="src space">一条</span>

<span class="cmt space">评论&nbsp;35</span>

<span class="dislike-news mid-space fr"></span>

</div>        

</div>

<div class="list_img_holder">

<img src="./头条_files/28558-13d152b90d8d46cc02e9d5a602160052">            

</div>     

</a> 

<div class="one-px-border"></div>

</section>

 

<section class="middle_mode has_action">

<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=6&amp;sn=f69f8bebc0cf08c7ba608ad7645d3591&amp;chksm=bd52e9468a2560505f87d25830729433728ae873c0d002db56fca34386a56abd2fa344417b66#rd" class="article_link clearfix">

<div class="desc">

<h3 class="dotdot line3 image-margin-right">晚清国画大师画的竹子,让他们给做成了一双筷子……</h3>          

<div class="item_info">

<span class="src space">一条</span>

<span class="cmt space">评论&nbsp;45</span>

<span class="dislike-news mid-space fr"></span>

</div>        

</div>

<div class="list_img_holder">

<img src="./头条_files/28558-9d466fc648d9f9fa5788f76383bdb869">            

</div>     

</a> 

<div class="one-px-border"></div>

</section>

 

<section class="middle_mode has_action">

<a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=7&amp;sn=8002f31f1e7dbbe672006b3afefc9161&amp;chksm=bd52e9468a256050b774538ab9842004474dee0f579150a45d1d4cdb60dde2dfd8087ab18da8#rd" class="article_link clearfix">

<div class="desc">

<h3 class="dotdot line3 image-margin-right">限量仅200盒的鲜桂花普洱,手慢无!</h3>          

<div class="item_info">

<span class="src space">一条</span>

<span class="cmt space">评论&nbsp;17</span>

<span class="dislike-news mid-space fr"></span>

</div>        

</div>

<div class="list_img_holder">

<img src="./头条_files/28558-fe0c73ee2c626bd628fd92300c643ee9">            

</div>     

</a> 

<div class="one-px-border"></div>

</section>

 

<section class="middle_mode has_action">

<a href="http://mp.weixin.qq.com/s?__biz=MjM5ODIyMTE0MA==&amp;mid=2650968810&amp;idx=1&amp;sn=2e315bedca47143dc35d79e0ed11bc50&amp;chksm=bd3836d18a4fbfc798bc09722319963e4caaf53a69c5ab6341354ad5da7c8f23a9df38a06c73#rd" class="article_link clearfix">

<div class="desc">

<h3 class="dotdot line3 image-margin-right">48 小时开发一个有商业价值的小应用可好?</h3>          

<div class="item_info">

<span class="src space">小道消息</span>

<span class="cmt space">评论&nbsp;154</span>

<span class="dislike-news mid-space fr"></span>

</div>        

</div>

<div class="list_img_holder">

<img src="./头条_files/28558-864f5af57d17ed737af8c7bd4f1b733e">            

</div>     

</a> 

<div class="one-px-border"></div>

</section>

 

<section class="middle_mode has_action">

<a href="http://mp.weixin.qq.com/s?__biz=MjAzNzMzNTkyMQ==&amp;mid=2653753248&amp;idx=1&amp;sn=d1a5b1faf70dc5deaa3e85ed5c246d56&amp;chksm=4a891fbe7dfe96a8b17bb47688b1c040aee6c7019392de030ad6c98d9c5e6676e0864a82b4ce#rd" class="article_link clearfix">

<div class="desc">

<h3 class="dotdot line3 image-margin-right">8点1氪:苹果第四财季业绩下滑;vivo和OPPO超越华为成为中国前两大手机厂商;Google Pixel手机预售大幅超过预期</h3>          

<div class="item_info">

<span class="src space">36氪</span>

<span class="cmt space">评论&nbsp;36</span>

<span class="dislike-news mid-space fr"></span>

</div>        

</div>

<div class="list_img_holder">

<img src="./头条_files/28558-4be398d354b0ebbc8472b7d02161b06e">            

</div>     

</a> 

<div class="one-px-border"></div>

</section>

 

<section class="middle_mode has_action">

<a href="http://mp.weixin.qq.com/s?__biz=MjAzNzMzNTkyMQ==&amp;mid=2653753248&amp;idx=2&amp;sn=0e68a8a222ef2e79d3f8a44635b92d61&amp;chksm=4a891fbe7dfe96a8bec7f2d048de368d89d6af4ebe743c08039cdd1f498b204664d4d8890f3a#rd" class="article_link clearfix">

<div class="desc">

<h3 class="dotdot line3 image-margin-right">在锤子内部孵化两年,VR项目团队或要解散了</h3>          

<div class="item_info">

<span class="src space">36氪</span>

<span class="cmt space">评论&nbsp;10</span>

<span class="dislike-news mid-space fr"></span>

</div>        

</div>

<div class="list_img_holder">

<img src="./头条_files/28558-8eef49058196dc4e05d337db0f00db34">            

</div>     

</a> 

<div class="one-px-border"></div>

</section>

 

 

</div>

<div id="divMore" class="list_bottom" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1); display: none;">

<section class="loadmoretip"><a href="" old-text="">加载中...</a></section>

</div>

</content>

<script type="text/javascript">
$('#divMore').hide()
var page=2;
var hack=0;
function showAjax(){
$.ajax({
type: "get",
url: "/listmore.php?page="+page,
async: false,
success: function(data){
//alert(data);
hack++;
//alert(hack)
$('#divListContent').append(data);
page++;
}
});
$('#divMore').hide()
}
function scrollFn(){
//真实内容的高度
var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
//视窗的高度
var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
//隐藏的高度
var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if(pageHeight - viewportHeight - scrollHeight < 20){
//alert($('#divMore')[0].style.display == "none")
if($('#divMore')[0].style.display == "none"){
$('#divMore').show()
showAjax(page);
}
}
}
$(window).scroll(scrollFn);

<content id="pageletListContent" class="feed-list-container"><div class="list_content" id="divListContent"><section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=1&amp;sn=cf905ddd3cda53cac1eab3200d89912c&amp;chksm=bd52e9468a2560504536d6ca10f88ebed8230c7fcfe77c1ba8935910d162c34ffd91674bcf79#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">为了在上海的3.8万人,这个奥运冠军帮他们做了一件事</h3>          <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论&nbsp;325</span><span class="dislike-news mid-space fr"></span></div>        </div><div class="list_img_holder"><img src="./头条_files/28558-239e811d98d117f6294423e575e44274">            </div>     </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=2&amp;sn=36c49da24a9fc753e125be510ca63fc5&amp;chksm=bd52e9468a2560500f32522181f38d488298b2c47eb07e05770ac4e52c9866554226b690d6ec#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">爱她,就让她每一寸肌肤享受这种触感</h3>          <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论&nbsp;42</span><span class="dislike-news mid-space fr"></span></div>        </div><div class="list_img_holder"><img src="./头条_files/28558-6724bc70a04829d97641af9cb26a81ef">            </div>     </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=3&amp;sn=2ba6bc6d1f866d92123b78a1ff8ab3ae&amp;chksm=bd52e9468a2560501b8bf6d3aeba8e7bf4642d3243fc1fb889dd2648fbc3b000221fc44a808d#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">超轻、好走又好看的健步鞋,真是国货良心</h3>          <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论&nbsp;36</span><span class="dislike-news mid-space fr"></span></div>        </div><div class="list_img_holder"><img src="./头条_files/28558-9c32f257dbb4d27fb10aa03fa653f915">            </div>     </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=4&amp;sn=073260a685c1f724be4f843989a4c4cc&amp;chksm=bd52e9468a256050c97549bd175f74d85483858b6228d7204677a82ce3ca51ac72e21c137f44#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">用了它,才知道这些年的牙都白刷了</h3>          <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论&nbsp;35</span><span class="dislike-news mid-space fr"></span></div>        </div><div class="list_img_holder"><img src="./头条_files/28558-5a4a22a6a2915df96e90b9913e8e6a52">            </div>     </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=5&amp;sn=570d001fed931dfe5d9fdac9d2c67530&amp;chksm=bd52e9468a256050abf9a0335f271c2338dc43168f705ed2d1acf48133b2e27a870ad8f5fd53#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">哈佛大学出版社的镇社之宝,竟是一套中国史!</h3>          <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论&nbsp;35</span><span class="dislike-news mid-space fr"></span></div>        </div><div class="list_img_holder"><img src="./头条_files/28558-13d152b90d8d46cc02e9d5a602160052">            </div>     </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=6&amp;sn=f69f8bebc0cf08c7ba608ad7645d3591&amp;chksm=bd52e9468a2560505f87d25830729433728ae873c0d002db56fca34386a56abd2fa344417b66#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">晚清国画大师画的竹子,让他们给做成了一双筷子……</h3>          <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论&nbsp;45</span><span class="dislike-news mid-space fr"></span></div>        </div><div class="list_img_holder"><img src="./头条_files/28558-9d466fc648d9f9fa5788f76383bdb869">            </div>     </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5MDI5OTkyOA==&amp;mid=2665524017&amp;idx=7&amp;sn=8002f31f1e7dbbe672006b3afefc9161&amp;chksm=bd52e9468a256050b774538ab9842004474dee0f579150a45d1d4cdb60dde2dfd8087ab18da8#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">限量仅200盒的鲜桂花普洱,手慢无!</h3>          <div class="item_info"><span class="src space">一条</span><span class="cmt space">评论&nbsp;17</span><span class="dislike-news mid-space fr"></span></div>        </div><div class="list_img_holder"><img src="./头条_files/28558-fe0c73ee2c626bd628fd92300c643ee9">            </div>     </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjM5ODIyMTE0MA==&amp;mid=2650968810&amp;idx=1&amp;sn=2e315bedca47143dc35d79e0ed11bc50&amp;chksm=bd3836d18a4fbfc798bc09722319963e4caaf53a69c5ab6341354ad5da7c8f23a9df38a06c73#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">48 小时开发一个有商业价值的小应用可好?</h3>          <div class="item_info"><span class="src space">小道消息</span><span class="cmt space">评论&nbsp;154</span><span class="dislike-news mid-space fr"></span></div>        </div><div class="list_img_holder"><img src="./头条_files/28558-864f5af57d17ed737af8c7bd4f1b733e">            </div>     </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjAzNzMzNTkyMQ==&amp;mid=2653753248&amp;idx=1&amp;sn=d1a5b1faf70dc5deaa3e85ed5c246d56&amp;chksm=4a891fbe7dfe96a8b17bb47688b1c040aee6c7019392de030ad6c98d9c5e6676e0864a82b4ce#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">8点1氪:苹果第四财季业绩下滑;vivo和OPPO超越华为成为中国前两大手机厂商;Google Pixel手机预售大幅超过预期</h3>          <div class="item_info"><span class="src space">36氪</span><span class="cmt space">评论&nbsp;36</span><span class="dislike-news mid-space fr"></span></div>        </div><div class="list_img_holder"><img src="./头条_files/28558-4be398d354b0ebbc8472b7d02161b06e">            </div>     </a> <div class="one-px-border"></div></section>
<section class="middle_mode has_action"><a href="http://mp.weixin.qq.com/s?__biz=MjAzNzMzNTkyMQ==&amp;mid=2653753248&amp;idx=2&amp;sn=0e68a8a222ef2e79d3f8a44635b92d61&amp;chksm=4a891fbe7dfe96a8bec7f2d048de368d89d6af4ebe743c08039cdd1f498b204664d4d8890f3a#rd" class="article_link clearfix"><div class="desc"><h3 class="dotdot line3 image-margin-right">在锤子内部孵化两年,VR项目团队或要解散了</h3>          <div class="item_info"><span class="src space">36氪</span><span class="cmt space">评论&nbsp;10</span><span class="dislike-news mid-space fr"></span></div>        </div><div class="list_img_holder"><img src="./头条_files/28558-8eef49058196dc4e05d337db0f00db34">            </div>     </a> <div class="one-px-border"></div></section>

</div><div id="divMore" class="list_bottom" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1); display: none;"><section class="loadmoretip"><a href="" old-text="">加载中...</a></section></div></content>

忆时笙安 | 园豆:12 (初学一级) | 2017-05-14 12:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册