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');//清除緩存，為了退出這個頁面后，不是從詳情頁回來，而是從首頁登錄頁進來的時候，能夠重新加載第一頁數據。

})

})

},