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