vue ，移动端H5，跳转详情再返回列表，保留滚动条位置

vue开发微信公众号的h5页面，

列表页，带翻页加载。跳转详情页，怎么能够返回时，保留列表页的页码和滚动条的位置？

尝试了一种方法，所有代码都在list页面就可以完成，大家可以在真机上试试效果。

1.在点击‘查看详情，修改详情’按钮的时候，也就是进入详情页之前，先保留下来这个页面的信息。

goAddEmployee(s_id,name){

let scroll = document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset;

  let listParam={

list:this.list,//当前的list

    page:this.page, //当前页码

    totalPage:this.totalPage,//总页数

    scroll:scroll,//滚动条位置

    oldname:name,//当前编辑的这个用户

}

localStorage.setItem("listParam", JSON.stringify(listParam));

this.$router.push({path:'/addemployee?depart='+this.departName+'&d_id='+departId })

},

2.在list的created方法里面，判断是否有缓存，如果有，直接读缓存且更新当前这条数据。如果没有，请求第一页的数据

listParam=JSON.parse(localStorage.getItem("listParam"))

if(listParam && listParam.hasOwnProperty('oldname')){

let oldname=listParam.oldname;

  this.uploadIndex(oldname);

}else{

this.getList(true);// 传true，就是加载第一页的意思。 getList方法里有判断，如果flag=true，把list=【】，page=1，加载第一页的数据。否则按照data中的page，请求对应页码的数据。

}

3.list页面，加一个更新当前数据的方法。比如之前点击的是‘李红’这条数据，进入了详情页。编辑后，回到列表页。从缓存中得到name=‘李红’，用这个name当参数，调取一个查询用户详情的方法。把详情页编辑后的头像，手机号，身份证号，昵称等等内容，更新为最新的。也就是把缓存的list，替换‘李红’这一条数据。

uploadIndex(name){

let paramObj={

page:1,

    limit:10,

    name:name,//name从缓存中拿到

    d_id:departId

}

https.post('Staff/getStaffList', paramObj).then(res=>{  //这里调用的是查询用户详情的接口，我写的是list接口。因为我的list接口支持按name查询。根据情况修改这个接口

let list=listParam.list; //缓存下来的list

    let data=res.data.list[0];//查询个人详情接口返回的数据

    list.map((n,index)=>{

if(n.people==name){ //在缓存list里，找是否有这个人，把这条数据，替换成最新的

list[index]=data;

      }

})

this.list=list; //更新全局data中的list数据。

    this.page=listParam.page;//更新全局data中的page。

    this.totalPage=listParam.totalPage;//更新全局data中的totalPage。

    let scroll=listParam.scroll;

    this.$nextTick(() => {

document.documentElement.scrollTop=scroll;//pc的移动端调试模式管用，真机上不行

document.body.scrollTop =scroll;//真机用这个！！！

//this.$refs.wrapper.scrollTop = scroll;//貌似没啥用，不起作用

      localStorage.removeItem('listParam');//清除缓存，为了退出这个页面后，不是从详情页回来，而是从首页登录页进来的时候，能够重新加载第一页数据。

})

})

},