vue開發(fā)微信公眾號(hào)的h5頁面，
列表頁，帶翻頁加載。跳轉(zhuǎn)詳情頁，怎么能夠返回時(shí)，保留列表頁的頁碼和滾動(dòng)條的位置？
嘗試了一種方法，所有代碼都在list頁面就可以完成，大家可以在真機(jī)上試試效果。
1.在點(diǎn)擊‘查看詳情，修改詳情’按鈕的時(shí)候，也就是進(jìn)入詳情頁之前，先保留下來這個(gè)頁面的信息。
goAddEmployee(s_id,name){
let scroll = document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset;
? let listParam={
list:this.list,//當(dāng)前的list
? ? page:this.page, //當(dāng)前頁碼
? ? totalPage:this.totalPage,//總頁數(shù)
? ? scroll:scroll,//滾動(dòng)條位置
? ? oldname:name,//當(dāng)前編輯的這個(gè)用戶
}
localStorage.setItem("listParam", JSON.stringify(listParam));
this.$router.push({path:'/addemployee?depart='+this.departName+'&d_id='+departId })
},
2.在list的created方法里面，判斷是否有緩存，如果有，直接讀緩存且更新當(dāng)前這條數(shù)據(jù)。如果沒有，請求第一頁的數(shù)據(jù)
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，加載第一頁的數(shù)據(jù)。否則按照data中的page，請求對(duì)應(yīng)頁碼的數(shù)據(jù)。
}
3.list頁面，加一個(gè)更新當(dāng)前數(shù)據(jù)的方法。比如之前點(diǎn)擊的是‘李紅’這條數(shù)據(jù)，進(jìn)入了詳情頁。編輯后，回到列表頁。從緩存中得到name=‘李紅’，用這個(gè)name當(dāng)參數(shù)，調(diào)取一個(gè)查詢用戶詳情的方法。把詳情頁編輯后的頭像，手機(jī)號(hào)，身份證號(hào)，昵稱等等內(nèi)容，更新為最新的。也就是把緩存的list，替換‘李紅’這一條數(shù)據(jù)。
uploadIndex(name){
let paramObj={
page:1,
? ? limit:10,
? ? name:name,//name從緩存中拿到
? ? d_id:departId
}
https.post('Staff/getStaffList', paramObj).then(res=>{? //這里調(diào)用的是查詢用戶詳情的接口，我寫的是list接口。因?yàn)槲业膌ist接口支持按name查詢。根據(jù)情況修改這個(gè)接口
let list=listParam.list; //緩存下來的list
? ? let data=res.data.list[0];//查詢個(gè)人詳情接口返回的數(shù)據(jù)
? ? list.map((n,index)=>{
if(n.people==name){ //在緩存list里，找是否有這個(gè)人，把這條數(shù)據(jù)，替換成最新的
list[index]=data;
? ? ? }
})
this.list=list; //更新全局data中的list數(shù)據(jù)。
? ? this.page=listParam.page;//更新全局data中的page。
? ? this.totalPage=listParam.totalPage;//更新全局data中的totalPage。
? ? let scroll=listParam.scroll;
? ? this.$nextTick(() => {
document.documentElement.scrollTop=scroll;//pc的移動(dòng)端調(diào)試模式管用，真機(jī)上不行
document.body.scrollTop =scroll;//真機(jī)用這個(gè)！??！
//this.$refs.wrapper.scrollTop = scroll;//貌似沒啥用，不起作用
? ? ? localStorage.removeItem('listParam');//清除緩存，為了退出這個(gè)頁面后，不是從詳情頁回來，而是從首頁登錄頁進(jìn)來的時(shí)候，能夠重新加載第一頁數(shù)據(jù)。
})
})
},
