使用框架:mui 

github地址:https://github.com/dcloudio/mui

需求:有一个列表页，可通过下拉刷新进行翻页，但由于苹果端和安卓端微信内嵌浏览器内核不同，导致相同返回按钮，不同处理过程。我希望在列表页点击详情页，点击返回按钮后还回到原来的浏览位置。苹果微信端是原生支持回到原来浏览位置，但安卓微信端会重新加载页面，所以安卓微信端需要进行特殊处理，达到跳转回原来浏览位置的目的。

 

要达到以上几个目的，需要解决两个问题：
1.点击详情页，记录位置
2.点击返回，列表页面重新加载，恢复位置

 

为了解决问题1，我选择使用sessionStorage来保存当前页面的搜索条件、页数，加载数据条数，滚动条当前位置。页数和数据条数不用说，很好获取，但滚动条当前位置怎么获取呢，因为我使用的mui，所以网上搜索解决办法，搜到如下代码:

var scroll = mui('.mui-scroll-wrapper').scroll(); 
    document.querySelector('.mui-scroll-wrapper' ).addEventListener('scroll', function (e ) { 
      console.log(scroll.y); 
    }) 

但我们使用 var scroll = mui('.mui-scroll-wrapper').scroll(); 会重新初始化一个滚动条，引发双滚动条问题，要知道，我们使用mui的下拉加载功能，已经默认初始化了一个滚动条，如果再次初始化一个，自然会引发双滚动条问题，所以我们应该使用页面中已经存在的这个滚动条，经过继续搜索，我找到了如下获取滚动条位置的方法:

document.querySelector('.mui-content' ).addEventListener('scroll', function (e ) { 
      console.log(e.detail.y); 
}) 

注：我的.mui-content 和.mui-scroll-wrapper修饰一个div

经测试，以上不会造成双滚动条问题，且能监听滚动条位置。

 

下面解决问题2，恢复页面浏览位置：

首先当然是从sessionStorage中将记录的数据取出来，然后根据页数、条数、搜索条件，查询出原来浏览时页面的所有数据，接下来，滚动条跳转。

我前面说过，我的滚动条是下拉刷新控件默认初始化的，所以，滚动条跳转的时候我应当避免使用 mui('.mui-scroll-wrapper').scroll()再次初始化滚动条，只要使用了，就会有双滚动条问题。最后，我使用：

 

 mui('.mui-content').pullRefresh().scrollTo(0,parseInt(historyScrollTop),0);

 

进行的滚动条跳转，historyScrollTop就是记录的上次浏览的滚动条位置，为负值，为什么要使用parseInt进行处理一下呢，因为不使用parseInt进行处理，会出现空白页及其他莫名其妙的问题。

 

以上

如有错误，欢迎指正