前戏：如何在移动端网页实现列表中搜索条件的滚动记忆，类似微信文章，浏览到文章的某个位置，点击下方当您第一次打开时，您仍然可以滚动到上次浏览的位置并继续浏览。本文介绍带分页的列表。如果你需要一篇没有分页的文章或者列表，当然你也可以参考。实现方法基本相同。因为这里使用了mui的下拉刷新列表组件，切换标签时需要默认（从头开始浏览）重置滚动条到顶部。refreshContainer是对应的listidmui列表组件。相关代码可以参考我之前的文章：【Mui多标签页实现下拉刷新上拉加载】https://segmentfault.com/a/11...mui("#refreshContainer")。scroll().scrollTo(0,0,0);//切换标签时默认滚动到顶部。定义一些页面加载时的工具函数：localGet是对localStorage.getItem的简单封装if(localGet("woAppInfo")==null){//第一次加载读取上次查询条件saveWoAppInfo({tabId:"untreated",滚动顶部:0,});}/***debouncefunction*@param{需要去抖的函数}func*@param{debouncetimeperiod}delay*/functiondebounce(fn,wait){vartimer=null;返回函数(){if(timer!==null){clearTimeout(timer);}timer=setTimeout(fn.bind(this),wait);};}functionsaveWoAppInfo(woappInfo){localStorage.setItem("woAppInfo",JSON.stringify(woappInfo));}列表数据渲染完成后执行autoScrollTo滚动到最后一个位置functionautoScrollTo(){setTimeout(function(){varscrollTop1=localGet("woAppInfo")&&JSON.parse(localGet("woAppInfo")).scrollTop;//mui("#refreshContainer").scroll().scrollTo(0,-1000,0);//$("#refreshContainer").scrollTop(scrollTop);mui("#refreshContainer").pullRefresh().scrollTo(0,scrollTop1,0);},500);}注意事项：列表分页的代码逻辑，因为不是本文的主要内容，这里不再赘述。大致逻辑是用户滚动到底部（最后一条记录）->触发mui列表回调函数的上拉->通过当前页数据继续获取下一页数据->追加到后面列表实现页面分页。queryObj对象在搜索和tab切换时以key-value的形式存储搜索条件。下一页打开时，会默认使用AppInfo中的搜索条件，达到搜索条件记忆的效果scroll.y是当前滚动条到页面列表顶部的高度值，因为顶部拉起时，滚动条超出顶部可能为负值，所以需要使用绝对值Math.abs的滚动事件初始化（autoScrollInit）这里也需要给出组件默认滚动到最后位置：functionautoScrollInit(){varscroll=mui("#refreshContainer").scroll({scrollY:true,//是否垂直滚动scrollX:false,//是否水平滚动startY:localGet("woAppInfo")&&JSON.parse(localGet("woAppInfo")).scrollTop,indicators:false,});document.querySelector("#refreshContainer").addEventListener("滚动",debounce(function(){varhref=$(".A-tabspan.active").attr("href");varqueryObj=JSON.parse(localGet("woAppInfo")).queryObj||{};varpageSize=pages[href].pageSize;varlistItemHeight=110;//列表单条记录的高度queryObj.pageCount=Math.floor(Math.abs(scroll.y)/(pageSize*listItemHeight)+1)*pageSize;//页数=当前下拉距离/(一页长度)*pageSizesaveWoAppInfo({tabId:href,queryObj:queryObj,scrollTop:数字(scroll.y.toFixed()),});},1000));}varwoAppInfo=localGet("woAppInfo")&&JSON.parse(localGet("woAppInfo"));vartabId=woAppInfo.tabId;//自动选择最后一个top标签??页if(tabId){$('span[href="'+tabId+'"]').addClass("active");$(".list[id='"+tabId+"']").addClass("active");}else{$('span[href="untreated"]').addClass("active");$(".list[id='untreated']").addClass("active");}页面滚动内存原理：listItemHeight是单条记录的高度，可以根据单条高度自行设置记录。有了这个高度，就可以计算出从滚动条到第一条记录的列表从当前列表中滚动条的y轴位置到最上面的值的项数(pagecount)Math.floor(Math.abs(scroll.y)/(pageSize*listItemHeight)+1)*pageSize;之所以会这样，是因为我们的列表是页面加载的数据，所以为了下次能够滚动到内存，所以这里需要计算出需要内存的记录条数和搜索条件，然后保存到AppInfo中。下次获取数据时，可以使用pageCount请求每页的数据量，可以直接恢复之前的数据量，这样就可以兼容scroll了。.y的位置与（因为如果上次滚动条的位置是几百个item的y轴位置，但是这次滚动内存的时候只加载了几条数据，所以自然不可能滚动到hundredsitemsduetoinsufficientdata)当请求列表数据时（搜索或初始加载），如果是普通的初始加载，则会被记忆。列表渲染完成后，先初始化监听列表的滚动事件，然后恢复上次滚动条的位置（autoScrollTo直接自动滚动到对应位置），取出当前搜索条件和id滚动时用于保存的选项卡。注意这里为了性能问题需要设置防抖，晃动1秒后数据会保存。执行saveWoAppInfo后的AppInfo存储：以下为列表请求代码：varwoAppInfo=localGet("woAppInfo")&&JSON.parse(localGet("woAppInfo"));如果（woAppInfo.queryObj&&woAppInfo.queryObj.pageCount）{data.data.pageCount=woAppInfo.queryObj。页数；}ajax(data,{success:function(json){varwoAppInfo=localGet("woAppInfo")&&JSON.parse(localGet("woAppInfo"));if(data.data.isSearch){//携带时滚动到查询条件时默认置顶mui("#refreshContainer").scroll().scrollTo(0,0,0);mui("#refreshContainer").pullRefresh().scrollTo(0,0,0);}如果(data.data.isSearch==undefined&&woAppInfo.tabId===data.data.href){//第一次进入时滚动当前tabautoScrollInit();自动滚动到（）；}},失败:function(json){...},错误:function(e){...},});当列表触发下拉刷新回调时，再次清除搜索条件（因为相当于重新加载列表，条件不算），保存当前tabid：//清除查询参数functionclearSearchParams(){cacheObj={//storesearch当搜索条件为xxxx:"",aaa:"",id:href==="all"?用户身份：””，};saveWoAppInfo({tabId:href,scrollTop:0});}functionpulldownRefresh(){varhref=$(".A-tabspan.active").attr("href");清除搜索参数（href）；fetchData(function(){//加载列表mui("#refreshContainer").pullRefresh().endPulldownToRefresh();});}总结：本文主要讲解移动端h5中的分页列表是如何滚动的。下次加载时，通过自动滚动的方式滚动到上次的位置，但要注意通过计算恢复上次记忆的数据量，因为滚动需要足够的y轴空间。如果觉得不错，希望大家多多点个赞。~非常感谢【教你实现页面tab和导航菜单记忆功能】https://segmentfault.com/a/11...
