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()方法中監聽返回事件並觸發自定義方法。