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');//清除缓存,为了退出这个页面后,不是从详情页回来,而是从首页登录页进来的时候,能够重新加载第一页数据。

})

})

},

你可能感兴趣的:(vue ,移动端H5,跳转详情再返回列表,保留滚动条位置)