In uniapp (return to previous page or multi-level page/pull up to refresh)

Return to the previous page or multi-level page (uni.navigateBack):

Close the current page and return to the previous page or multi-level pages. The current page stack can be obtained through getCurrentPages() to determine how many layers need to be returned.

In actual project:

医生列表页面 会进入 医生详情页面 进行签约

我的医生页面 会进入 医生详情页面 进行签约

需求是: 你从哪个页面进入医生详情页面进行签约的,那么签约成功之后就要跳转到之前对应的页面(这里就用到 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
})

Official example:

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

There is another way of writing combined with the page stack getCurrentPages():

The getCurrentPages() function is used to obtain the instance of the current page stack, which is given in the order of the stack in the form of an array, the first element is the home page, and the last element is the current page.

// 我们可以用 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();
    }
}

Pull to refresh (onReachBottom):

Pull-up refresh can be achieved through onReachBottom(), which is at the same level as onLoad and onShow.

Official: onReachBottom: The event that the page scrolls to the bottom (not scroll-view scrolls to the bottom), which is often used to pull down the next page of data.

// 实际项目中使用

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();
}