小程序实现列表页跳转详情页,详情页操作数据后,列表做到不刷新同步数据

我们经常会有这种功能:
实现从列表页进入详情页,详情页进行某些操作,返回列表页,列表页要把详情页的操作同步到列表页,比如我们从活动列表进活动详情,在活动详情页点击了预约活动按钮,按钮变成已预约,并且活动库存-1,返回列表页按钮也要同步为已预约,库存-1;

具体功能清楚,先回忆下getCurrentPages()方法的返回值:

获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。

通过这个方法我们可以获取到来源页面的信息,包括来源页面的数据及方法,思路这不就来了:在详情页调用getCurrentPages()方法获取列表页数据方法,点击预约按钮时,同步调用列表页的预约方法:

let pages = getCurrentPages();
if (pages.length >= 2 && pages[pages.length - 2].route == "page/list/list") {
  //这里做个判断,如果上个页面为list页,才调用列表方法
  let preData = pages[pages.length - 2];
  let categoryId = 1001;
  //调用list方法更新数据,这里可以获取到list当前分页数,当前活动类别然后都传入方法
  preData.listGetData(categoryId)
}
复制代码

其中listGetData()方法在list页中为获取列表数据接口:

//比如:
listGetData(id, page = 0, pageSize = 10){
    wx.request({
      url: "/getList",
      method: 'get',
      data:{
      id: id,
      page: page,
      pageSize: pageSize
      },
      success: res => {

      },
    })
}
复制代码

小程序可以获取到页面栈还是非常方便的,而且小程序有onShow()onLoad()生命周期特性,可以做到返回不请求数据,用户体验极佳;

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享