版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36535245/article/details/79753703
微信公众号项目返回上一页因为是ajax动态数据，返回上一页微信浏览器会自动刷新页面，
不符合用户场景，需要返回上一页停留在原来点击的列表页处
尝试方案一：
寻找微信官方解决方案，未找到解决方案，有解决方案的大神可以回帖指导指导大家，嘿嘿
尝试方案二
百度问题大多都是缓存数据，然后返回的时候加载缓存数据，然后到列表点击位置
数据缓存成功，百度大部分例子不合适项目需求，也有可能太菜了看不懂。。。。
缓存后无法到达数据列表点击位置，采用缓存滚动条的位置，加载时滚动到列表位置，
由于采用MUI框架，上拉刷新与滚动条冲突。。。。。。。。。。
未找到解决方案，最后决定换上拉刷新插件
解决方案：
采用mescroll.js 上拉加载与刷新插件 mescroll.js官网
案例丰富，文档清晰，完美解决。。。。。。。。容易理解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--在您实际的项目中,请留意mescroll-option.css的图片路径是否引用正确,可写成绝对路径或网络地址-->
<!--可把mescroll-option.css代码拷贝到mescroll.min.css中,合为一个css文件,方便引用-->
<link rel="stylesheet" href="../../dist/mescroll.min.css">
<link rel="stylesheet" href="option/mescroll-option.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-touch-callout:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
}
body{background-color: white}
ul{list-style-type: none}
img{width: 100%;vertical-align: bottom;}
/*模拟的标题,底部*/
.header{
z-index: 9990;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 44px;
border-bottom: 1px solid #eee;
background-image: url(img/zhihu1.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: white;
}
.footer{
z-index: 9990;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
border-top: 1px solid #eee;
background-image: url(img/zhihu5.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: white;
}
/*列表*/
.mescroll{
position: fixed;
top: 44px;
bottom: 51px;
height: auto;
}
/*回到顶部按钮*/
.mescroll-totop {
bottom: 70px;
}
/*下拉刷新回调的提示*/
.download-tip{
z-index: 9900;
position: fixed;
top: 20px;
left: 0;
width: 100%;
height: 24px;
line-height: 24px;
font-size: 12px;
text-align: center;
background-color: rgba(80,175,85,.7);
color: white;
-webkit-transition: top 300ms;
transition: top 300ms;
}
/*展示上拉加载的数据列表*/
.news-list li{
padding: 16px;
border-bottom: 1px solid #eee;
}
.news-list .new-content{
font-size: 14px;
margin-top: 6px;
margin-left: 10px;
color: #666;
}
</style>
</head>
<body>
<!--标题-->
<a href="#"><div class="header"></div></a>
<!--下拉刷新回调的提示-->
<p id="downloadTip" class="download-tip">刷新成功</p>
<!--滑动区域-->
<div id="mescroll" class="mescroll">
<!--展示上拉加载的数据列表-->
<ul id="newsList" class="news-list">
<!--<li>
<p>【话题1】标题标题标题标题</p>
<p class="new-content">内容内容内容内容内容内容内容内容内容</p>
</li>-->
</ul>
</div>
<!--底部-->
<a href="#"><div class="footer"></div></a>
</body>
<!--在您实际的项目中,请留意mescroll-option.js的图片路径是否引用正确,可写成绝对路径或网络地址;-->
<!--可把mescroll-option.js代码拷贝到mescroll.min.js中,合为一个js文件,方便引用-->
<script src="../../dist/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script src="option/mescroll-option.js" type="text/javascript" charset="utf-8"></script>
<!--mescroll本身不依赖jq,这里为了模拟发送ajax请求-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
//创建MeScroll对象
var mescroll = initMeScroll("mescroll", {
down:{
auto:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
callback: downCallback, //下拉刷新的回调
},
up: {
auto:true,//初始化完毕,是否自动触发上拉加载的回调
isBoth: false, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
callback: upCallback, //上拉加载的回调
toTop:{ //配置回到顶部按钮
src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
//offset : 1000
}
}
});
/*下拉刷新的回调 */
function downCallback(){
//加载轮播数据..
//...
//加载列表数据
getListDataFromNet(0, 1, function(data){
//联网成功的回调,隐藏下拉刷新的状态
mescroll.endSuccess();
//设置列表数据
setListData(data, false);
//显示提示
$("#downloadTip").css("top","44px");
setTimeout(function () {
$("#downloadTip").css("top","20px");
},2000);
}, function(){
//联网失败的回调,隐藏下拉刷新的状态
mescroll.endErr();
});
}
/*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
function upCallback(page){
//联网加载数据
getListDataFromNet(page.num, page.size, function(curPageData){
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
mescroll.endSuccess(curPageData.length);
//设置列表数据
setListData(curPageData, true);
}, function(){
//联网失败的回调,隐藏上拉加载的状态
mescroll.endErr();
});
}
/*设置列表数据*/
function setListData(curPageData, isAppend) {
var listDom=document.getElementById("newsList");
for (var i = 0; i < curPageData.length; i++) {
var newObj=curPageData[i];
var str='<p>'+newObj.title+'</p>';
str+='<p class="new-content">'+newObj.content+'</p>';
var liDom=document.createElement("li");
liDom.innerHTML=str;
if (isAppend) {
listDom.appendChild(liDom);//加在列表的后面,上拉加载
} else{
listDom.insertBefore(liDom, listDom.firstChild);//加在列表的前面,下拉刷新
}
}
}
/*联网加载列表数据
在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
实际项目以您服务器接口返回的数据为准,无需本地处理分页.
* */
var downIndex=0;
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
//延时一秒,模拟联网
setTimeout(function () {
try{
var newArr=[];
if(pageNum==0){
//此处模拟下拉刷新返回的数据
downIndex++;
var newObj={title:"【新增话题"+downIndex+"】 新增话题", content:"新增话题的内容"};
newArr.push(newObj);
}else{
//此处模拟上拉加载返回的数据
for (var i = 0; i < pageSize; i++) {
var upIndex=(pageNum-1)*pageSize+i+1;
var newObj={title:"【话题"+upIndex+"】 标题标题标题标题标题标题", content:"内容内容内容内容内容内容内容内容内容内容"};
newArr.push(newObj);
}
}
//联网成功的回调
successCallback&&successCallback(newArr);
}catch(e){
//联网失败的回调
errorCallback&&errorCallback();
}
},2000)
}
});
</script>
</html>上拉刷新下拉加载列表案例，具体js可以下载官方文档，有滚动函数完美解决返回上一页问题；mescroll.js官网
不懂处可以回帖询问或加我qq:1163284857
最后祝大家的加班越来越少，技术越来越好