uniapp使用navigateBack方法返回上级页面并刷新

Posted 2023-04-02 今后刚睡醒

• 分析:一般调用navigateBack返回上一页时有两种情况
  • 不需刷新:查看内容,状态未改变.
  • 需刷新:在第二页编辑后,上一页列表中与之对应的数据状态一起改变

目前想出的方案是在回退之前修改上页判断条件,回退后重新获取判断条件在决定是否刷新。

• 示例:

  • 详情页
    修改状态成功后,准备回退到上一页之前,将上一页的是否刷新参数值改为是的状态

    let pages = getCurrentPages();
    let prevPage = pages[pages.length - 2];//上一个页面
    //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
    prevPage.setData(
    	 isRefresh: 1 
    )
    // 再根据需求，确定返回上一页面
    wx.navigateBack(
    	delta: 1
    )
    

  • 列表页
    需要在onshow钩子中获取判断条件

    export default
    	data()
    		return
        		isRefresh:false
    		
    	,
    	onShow()  
    		// 如果是提交状态返回isRefresh=1，才刷新页面，从详情过来无需刷新
    		let pages = getCurrentPages();
    		let currPage = pages[pages.length - 1];
    		if(currPage.__data__.isRefresh)
    			// 重新获取数据
    			this.getData(true)//获取列表数据
    			// 每一次需要清除，否则会参数会缓存
            	currPage.__data__.isRefresh=false
    		
    	
    
    

uniapp里navigateBack返回上一页携带参数方法封装

/**
 * 获取上一个页面
 */
export const getPrePage = (url = '/pages/index/index') => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 2]
  if (!page) {
    uni.reLaunch({
      url
    })
    return
  }
  return page
}

//使用

    onLoad(options) {
   //监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
      if (options && options.remark) {
        this.remark = options.remark
      }
    },
       methods: {
      goBack() {
        const page = getPrePage()
        if (page) {
        //获取上个页面得变量并赋值  $vm表示实例化的组件
          page.$vm.remark = this.remark
        }
        if (this.remark) {
          toast('已成功添加备注')
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1500)
        } else {
          uni.navigateBack({
            delta: 1
          })
        }
      }
    }

整理不易 点个关注吧！ 新的问题会继续分享~