uniapp返回详解

一、uniapp返回指定页面

在uniapp中，我们可以通过uni.navigateTo()方法跳转到指定页面，并在需要返回时通过uni.navigateBack()方法返回指定页面。

下面是一个返回指定页面的示例代码：

uni.navigateTo({
  url: '/pages/detail/detail?id=123'
})

uni.navigateBack({
  delta: 2 // 返回两级页面
})

通过navigateTo()方法跳转到detail页面，然后通过navigateBack()方法返回到index页面。

二、uniapp返回至指定页面

有时候我们需要在返回时跳过中间的某些页面，直接返回到指定页面。这时我们可以使用uni.navigateBack({delta:1})指定返回的层数。

如下所示：

// 跳转到detail页面
uni.navigateTo({
  url: '/pages/detail/detail?id=123'
})

// 跳转到list页面
uni.navigateTo({
  url: '/pages/list/list'
})

// 直接返回detail页面
uni.navigateBack({
  delta: 2 // 返回两级页面
})

在该示例中，我们先跳转到detail页面，然后再跳转到list页面。最后通过navigateBack()方法直接返回到detail页面，忽略了list页面。

三、uniapp返回按钮

在uniapp中，我们默认可以使用系统的返回按钮实现返回操作。如果想要自定义返回按钮，则需要在页面代码中实现以下两个方法：

// 监听返回按钮
onBackPress(e) {
  uni.navigateBack({
    delta: 1
  })
}

// 注册返回事件
mounted() {
  uni.$on('back', this.onBackPress)
}

// 移除返回事件
beforeDestroy() {
  uni.$off('back', this.onBackPress)
}

在该示例中，我们实现了自定义返回按钮的功能。通过onBackPress()方法监听返回按钮点击事件，然后在mounted()方法中注册返回事件，在beforeDestroy()方法中移除返回事件。

四、uniapp返回上一页刷新数据

有时候我们返回到上一页需要刷新数据，这时我们可以在返回时通过uni.navigateBack()方法传递数据，在上一页的onNavigatedTo()方法中读取数据并刷新页面。

下面是一个刷新数据的示例代码：

// detail页面
export default {
  data() {
    return {
      id: ''
    }
  },
  methods: {
    goBack() {
      // 返回时传递数据
      uni.navigateBack({
        delta: 1,
        success: () => {
          uni.$emit('back', this.id)
        }
      })
    }
  }
}

// list页面
export default {
  methods: {
    onNavigateTo(id) {
      // 读取传递的数据并刷新页面
      console.log('传递的数据', id)
    }
  },
  mounted() {
    // 监听返回事件并刷新页面
    uni.$on('back', this.onNavigateTo)
  },
  beforeDestroy() {
    // 移除返回事件
    uni.$off('back', this.onNavigateTo)
  }
}

在该示例中，我们在detail页面通过navigateBack()方法传递数据，并在list页面的onNavigateTo()方法中读取数据并刷新页面。

五、uniapp返回上一页事件

有时候我们需要监听返回按钮的点击事件，例如在进行一些数据保存操作时需要提示用户保存操作将会撤销。我们可以在onNavigationBarButtonTap()方法中监听返回按钮的点击事件。

下面是一个监听返回事件的示例代码：

// 监听返回事件
onNavigationBarButtonTap() {
  uni.showModal({
    title: '提示',
    content: '确定要返回吗？将会撤销已保存的数据',
    success: (res) => {
      if (res.confirm) {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  })
}

在该示例中，我们在onNavigationBarButtonTap()方法中监听返回按钮的点击事件，并在弹出提示框后通过navigateBack()方法返回上一页。

六、uniapp返回图标变成文字

在uniapp中，我们可以通过设置返回按钮的内容来实现返回图标变成文字的效果。我们可以在pages.json文件中修改navigationBarTitleText属性来设置返回按钮的内容。

下面是一个返回图标变成文字的示例代码：

// pages.json
{
  "navigationBarTitleText": "返回",
  "navigationBarTextStyle": "black"
}

在该示例中，我们设置navigationBarTitleText为“返回”，返回按钮的内容将会显示为“返回”。

七、uniapp返回首页

在uniapp中，我们可以通过uni.reLaunch()方法返回至首页。与navigateTo()方法相比，reLaunch()方法可以保留首页页面栈之外的所有页面，并且重启首页。

下面是一个返回首页的示例代码：

// 返回到首页
uni.reLaunch({
  url: '/pages/index/index'
})

在该示例中，我们通过reLaunch()方法返回至首页。

八、uniapp返回上一页并刷新

在uniapp中，我们可以通过uni.navigateBack()方法返回上一页并刷新数据。

下面是一个返回上一页并刷新的示例代码：

// 返回上一页并刷新数据
uni.navigateBack({
  delta: 1,
  success: () => {
    uni.$emit('refresh')
  }
})

// 监听更新事件并刷新页面
mounted() {
  uni.$on('refresh', () => {
    // 刷新页面数据
  })
},
beforeDestroy() {
  uni.$off('refresh')
}

在该示例中，我们在返回上一页时通过navigateBack()方法刷新数据，并在上一页的mounted()方法中监听更新事件并刷新页面。

九、uniapp返回能触发事件吗

在uniapp中，我们可以通过uni.navigateBack()方法返回上一页并触发事件。

下面是一个返回并触发事件的示例代码：

// 返回上一页并触发事件
uni.navigateBack({
  delta: 1,
  success: () => {
    uni.$emit('back')
  }
})

// 监听返回事件并触发自定义方法
mounted() {
  uni.$on('back', () => {
    // 执行自定义方法
  })
},
beforeDestroy() {
  uni.$off('back')
}

在该示例中，我们在返回上一页时通过navigateBack()方法触发自定义事件，并在上一页的mounted()方法中监听返回事件并触发自定义方法。