一.微信小程序。
微信小程序提供了onLoad,onShow生命周期函数来进入页面获取列表数据。onLoad和onShow区别:onLoad,如果第一次进入页面之后,再次进入时不再触发。onShow,小程序每次进入页面都会触发,如果在onShow里调用列表接口,可以每次获取最新数据,但是页面也会重新加载,如果数据量大,用户体验不好。所以可以使用小程序页面栈提供的方法来更好的处理这些问题。
1.新增数据
新增数据,新增数据一般按照发布的时间显示最新数据,所以新增的时候直接在详情页面调用列表页面的onLoad()方法即可,具体实现如下:
详情页面(保存成功之后调用):
let pages =getCurrentPages();//当前页面栈
if (pages.length >1) {
let beforePage = null;
for(let i = 0; i < pages.length; i++){
if(pages[i].route === 'pages/dynamic/dynamic' || pages[i].route === 'pages/notice/notice'){
beforePage = pages[i];
}
}
beforePage.onLoad();//触发父页面中的方法
}
列表页面:
onLoad: function (options) {
//调用列表的方法逻辑
this.setData({
noticeDyns: [],
page: 1
});
this.getList();
},
2.删除数据,如果删除按钮在详情页面里面,进入详情页面需要记录当前删除数据的所引。
列表页面:
//跳转到详情页
clickPages: function (ev) {
//记录删除索引
let index = ev.currentTarget.dataset.itemindex;
wx.setStorageSync("readIndex", index);
let url = ev.currentTarget.dataset.url;
app.hrefToPageFn(url);
},
//删除函数
deleteItemCallback(index){
let list = JSON.parse(JSON.stringify(this.data.list));
list.splice(index,1);
this.setData({
list
});
},
详情页面,删除成功之后调用:
if (backdata.data.status == 200) {
let itemindex = wx.getStorageSync('readIndex');
let pages =getCurrentPages();//当前页面栈
if (pages.length >1) {
var beforePage = null;
for(let i = 0; i < pages.length; i++){
if(pages[i].route === 'pages/notice/notice'){ //列表页面名字
beforePage = pages[i];
}
}
beforePage.deleteItemCallback(itemindex);//触发父页面中的方法
}
wx.showToast({
title: "删除成功",
icon: "success",
mask: true,
success: function () {
setTimeout(function () {
wx.navigateBack()
}, 500)
}
});
}
3.修改数据,与删除类似,需要记录对应的索引。
4.查看数据详情返回定位问题
如果只是查看详情,只需将获取列表逻辑写到onLoad里即可。
二.web端-vue
使用vue提供了keep-alive
功能。具体实现:
1.router.js,需要缓冲的页面添加meta:{keepAlive:true}
{
path: 'lessonList/lessondetail',
component: TeacherNewLesson,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: 'lessonList/newLesson',
component: TeacherNewLesson,
meta: {
keepAlive: true // 需要缓存
}
},
{
path: 'questionlist',
component: QuestionList,
meta: {
keepAlive: true // 需要缓存
}
},
2.router-view页面
<div id="app" class="applica">
<keep-alive>
<router-view :key="this.$route.path" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view :key="this.$route.path" v-if="!$route.meta.keepAlive"></router-view>
</div>
3. 列表页面,获取最新数据,有两种方法,和methods,data同级。
1)使用beforeRouteEnter钩子函数。
beforeRouteEnter(to, from, next) {
next(vm => {
//获取列表数据方法
if(from.path === `/teacherHome/questionlist/questionDetail`){
//详情页进入
vm.getquestionList();
}else{
//主页进入
console.log(vm.pageIndex);
vm.pageIndex = 1;
vm.currentPage = 1;
vm.getquestionList();
}
})
},
2)使用keep-alive会触发activated方法,再次进入created和mounted方法不再调用。
activated() {
this.getquestionList();
},
3)列表进入详情页面函数,加入标识(query: {problemId: problemId}})判断是新增还是修改。
questionDetail(index, row) {
let problemId = this.tableData[index].problemId;
//修改
this.$router.push({path: '/teacherHome/questionlist/questionDetail', query: {problemId: problemId}})
//新增
this.$router.push({path: '/teacherHome/questionlist/questionDetail'})
},
4. 详情页面,加入
beforeRouteLeave钩子函数。
beforeRouteLeave (to, from, next) {
if (to.path == "/teacherHome/questionlist") {
if(!from.query.problemId){
//新增
to.meta.keepAlive = false;
}else{
//修改
to.meta.keepAlive = true;
}
} else {
to.meta.keepAlive = false;
}
next();
},
5. 列表删除数据。列表每次删除数据都回到第一页用户体验不好,可以添加判断进行逻辑处理。
//分页
handleCurrentChange(val) {
this.pageIndex = val;
this.getquestionList()
},
//删除函数
handleDelete(id, rows) {
let contestId = sessionStorage.getItem("contestId");
this.$confirm(`确定删除该数据吗?`).then(_ => {
this.$http
.get("BUAAOJ/problems/deleteProblem/" + contestId + "/" + id, {})
.then(response => {
if (response.status == -1) {
this.$remind.message(response.info, "warning");
} else {
//删除总数减一
this.totalNUm--;
if (this.totalNUm <= (this.pageIndex - 1) * this.pageSize) {
//判断最后一页删除
this.pageIndex--;
if(this.pageIndex===0)return;
this.getquestionList();
} else {
this.getquestionList();
}
}
})
.catch(error => {
});
}).catch(_ => {
})
},
6.兼容性测试
firefox,webkit