功能简介:
1、主页面路径mainpage、添加界面路径addpage
2、默认显示全部tab,只有一个添加按钮
3、点击添加按钮,跳转到添加界面,添加新数据后,返回原界面,新添加的数据即时显示出来
关键点:
1、利用缓存存储新添加数据的创建时间、专家类型
2、当路由变化时,判断缓存数据是否变化,变化则触发下拉刷新事件;否则,不进行任何操作
实现步骤:
1、在添加界面,点击提交按钮时,存储添加数据的创建时间、专家类型
/** 提交 */doSubmit(){//判断数据是否为空......axios({//后端接口......}).then((res)=>{let _this = this;if(res.data.result===1){// 时间、专家类型组成一个新对象,存在session中let newdata = { id: Date.now(), havedatatype:_this.formData.haveEvent }sessionStorage.setItem("havedatatype", JSON.stringify(newdata));showAlert("添加成功!","提示",function(){_this.$router.go(-1);//返回原界面});}else{Toast("添加失败");}}).catch(err =>{Toast('未获取到接口数据!');})},
2、mainpage界面使用hasAddFlag存储缓存数据
data() {return {hasAddFlag:{}//记录缓存数据}}
3、监听路由变化
watch: {// 监听,当路由从添加界面返回到全部界面时,获取缓存中的数据$route: {handler: function(val, oldVal){if(val.name==="mainpage"&&oldVal.name==="addpage"){this.hasAddFlag=JSON.parse(sessionStorage.getItem("havedatatype")||'{}')}},},},
4、监听缓存数据变化
//监听缓存数据变化,如果新值和旧值一致,则不做处理;否则表示有新添加的数据,界面及时刷新hasAddFlag(newVal,oldVal){if(newVal.id===oldVal.id &&newVal.havedatatype===oldVal.havedatatype ){return}// 不管新添加的是专家还是普通人员,全部tab下数据均刷新;而专家tab只有新增专家才刷新this.pullingDown();if(newVal.havedatatype===1){//专家this.pullingDown2();}}