uniapp中(返回上一页面或多级页面/上拉刷新)

返回上一页面或多级页面(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();
}