最近做的一个公众号项目需要在一个列表页面跳转到详情页上时实现一个效果,详情页面内点击下一人时更新数据,点击手机返回键需要在当前路由显示上一人的数据;点击返回列表页按钮go()而不是路由跳转router.push到列表页。
具体场景描述:
1,上一页是一个列表list,下一个是人员详情detail;
2,点击列表内某条进入详情detail;
3,detail页面底部两个fixed btm0按钮,返回列表页和查看下一人;
4,点击原生返回键返回到上一个人;
实现方法:
list页面点击li需要跳转detail页面时将列表数据存下来,带上query参数,在detail监听query的变化,query发生变化时请求接口。
上代码:
·list·
<div class="content_dv">
<h4>人员列表</h4>
<van-tabs v-model="activeTab">
<van-tab title="列表一">
<ul>
<li v-for="(item,index) in list1" :key="index" @click="toDetail(index,1,item,stage)">
<span>{{item.name}}</span>
</li>
</ul>
</van-tab>
<van-tab title="列表二">
<ul>
<li v-for="(item,index) in list2" :key="index" @click="toDetail(index,0,item,stage)">
<span>{{item.name}}</span>
</li>
</ul>
</van-tab>
</van-tabs>
</div>
·list·
methods:{
toDetail(index,curList,itemObj,stageId){//跳转到详情页面
curList==1?localStorage.setItem('menList',JSON.stringify(this.list1)):localStorage.setItem('menList',JSON.stringify(this.list2));//任务详情 已完成/未完成人员列表数据
this.$router.push({
path: "/detail",
query: {
index:index,//当前人下标
curList:curList,//是列表1或列表2
name:sObj.name,
stageId:stageId,//当前列表id
}
});
},
}
·detail·
watch: {
'$route.query.index': function () {
this.pageQuery = this.$route.query;
this.getData();//请求接口数据
}
},
created() {
this.pageQuery = this.$route.query;
sessionStorage.setItem('detailPersonIndex',this.$route.query.index);
this.getData();
},
methods:{
toPersonIndex(){//返回列表页
let returnIndex = Number(this.$route.query.index) - Number(sessionStorage.getItem('detailPersonIndex')) + 1;
this.$router.go(-returnIndex);
},
toNextDetail(){//查看下一人的详情页面
let arrIndex = Number(this.$route.query.index);
if ( arrIndex == (this.menList.length-1) ) {//this.menList:前一页缓存的人员列表
return false;
}
this.loadShow = true;
this.$router.push({
query: {
index:arrIndex+1,
curList:this.$route.query.curList,
stageId:this.$route.query.stageId,
name:this.menList[arrIndex+1].name,
},
});
},
},