返回上一页面或多级页面(uni.navigateBack):
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
实际项目中:
医生列表页面 会进入 医生详情页面 进行签约
我的医生页面 会进入 医生详情页面 进行签约
需求是: 你从哪个页面进入医生详情页面进行签约的,那么签约成功之后就要跳转到之前对应的页面(这里就用到 uni.navigateBack)
那么你就可以根据你进入医生详情页面的需要几层来进行跳转
// 医生列表页面
uni.navigateTo({
url: `/pages/home/signAContract/doctorDetails?id=${id}`
})
// 我的医生页面
uni.navigateTo({
url: `/pages/home/signAContract/doctorDetails?id=${id}`
})
// 医生详情页面 doctorDetails.vue
// 签约成功返回对应页面
uni.navigateBack({
delta: 1
})
官方示例:
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
uni.navigateTo({
url: 'B?id=1'
});
// 此处是B页面
uni.navigateTo({
url: 'C?id=1'
});
// 在C页面内 navigateBack,将返回A页面
uni.navigateBack({
delta: 2
});
还有另外一种写法结合页面栈getCurrentPages() :
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
// 我们可以用 uni.navigateBack 和 getCurrentPages()页面栈 来实现
// 下面是医生详情页面,当我们签约成功之后跳到对应的页面(例: 医生列表)
// 因为医生列表页面和我的医生页面 都可以进入 医生详情页面,所以页面栈中是可以获取到医生详情页面的上一页的
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; // 上一页
uni.navigateBack({
success: function() {
// 触发医生列表页面的reFresh()方法,使得医生详情签约成功之后,刷新医生列表页面的数据
beforePage.$vm.reFresh();
}
})
// 医生列表页面
methods: {
reFresh: function() {
this.searchData.pageNum = 1
this.serviceList =[]
this.getList();
}
}
上拉刷新(onReachBottom):
通过onReachBottom()可以实现上拉刷新,跟onLoad和onShow同级.
官方: onReachBottom: 页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。
// 实际项目中使用
data() {
return {
searchData: { // 参数
hospital: '',
pageNum: 1,
pageSize: 10,
eldAccountId: JSON.parse(uni.getStorageSync("userData")).accountId
},
serviceList: [], // 列表数据
total: undefined
}
},
/*
我们页面刚进来肯定是要默认刷新的
当我们加了上拉刷新的话这里就需要加几个条件
把pageNum重置成1
把serviceList数据清空,否则页面会显示重复数据
*/
onShow() {
this.searchData.pageNum = 1
this.serviceList = []
this.getList();
},
methods: {
// 首先我们先获取列表数据
getList() {
doctorList(this.searchData).then((res) => {
if (res.code == 200) {
this.total = res.total; // 先把total保存下来,后面下拉刷新的时候会用到
if(this.searchData.pageNum === 1){ //当页面的分页数为1页时就直接赋值返回的records数组
this.serviceList = res.data.records;
}else {
/*
当我们的分页pageNum大于1页时,说明我们触发了下面的onReachBottom函数使得请求的pageNum
进行了自增,那么请求回来的数据就是多条分页的,这时我们就需要把多条分页里面的数据进行合并
*/
this.serviceList = this.serviceList.concat(res.data.records);
}
} else {
uni.showToast({
title: res.msg,
icon: 'error'
});
}
})
}
},
onReachBottom() { // 上拉触底函数
// 滑动到底部我们就把pageNum自增
this.searchData.pageNum++;
// Math.ceil 返回大于或等于一个给定数字的最小整数,函数将会返回整数0而不会给出一个NaN错误.
let page = Math.ceil(this.total/this.searchData.pageNum);
// 判断如果现在的pageNum大于 page 就直接return,不刷新列表
if(this.searchData.pageNum > page) {
return
}
this.getList();
}