uniapp如何跳轉後返回不刷新-uni-app-PHP中文網

首頁

web前端

uni-app

uniapp如何跳轉後返回不刷新

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 26, 2023 am 09:20 AM

前言

Uniapp作為一個跨平台的開發框架，已經被越來越多的開發者所接受和使用。在Uniapp中，頁面跳轉是非常常見的操作，在進行頁面跳轉後，有時候需要保留原始頁面的狀態，以便下次回到這個頁面時不需要重新加載數據，也不需要重新進行一些複雜的操作。那麼，如何在Uniapp中實現跳轉後返回不刷新的效果呢？本文將為大家詳細介紹。

Uniapp頁面跳轉

在Uniapp中進行頁面跳轉，我們通常使用uni.navigateTo或uni.redirectTo方法，它們的具體區別如下：

#uni.navigateTo

使用uni.navigateTo方法進行頁面跳躍時，會在目前頁面的堆疊頂部新增一個新的頁面，這個新的頁面會覆寫目前頁面的一部分，如下圖中所示：

可以看到，我們在A頁面中使用uni.navigateTo跳到B頁面，在B頁面中加入了一個新的內容，這個內容會出現在A頁面的上面，當我們回到A頁面時，B頁面會被銷毀，整個過程就像堆疊結構一樣。

uni.redirectTo

與uni.navigateTo不同的是，使用uni.redirectTo進行頁面跳轉時，會將目前頁面刪掉，然後跳到一個新的頁面，如下圖所示：

可以看到，我們在A頁面中使用uni.redirectTo跳到了B頁面，在B頁面中新增了一個新的內容，但是當我們回到A頁面時，B頁面已經被銷毀了，整個過程就像一個佇列。

如何實現跳轉後返回不刷新

透過上面的介紹，我們可以知道，當我們需要跳轉後返回不刷新的效果時，不能直接使用uni.navigateTo或uni .redirectTo方法，因為這兩個方法都會銷毀跳轉前的頁面。那麼，該如何實現呢？

實現想法：

透過uni.switchTab或uni.reLaunch方法前往指定頁面，這兩個方法都有一個特點，就是無論怎麼跳轉，都會刷新頁面，所以要注意這裡不能使用uni.navigateTo或uni.redirectTo方法。

在需要跳轉的頁面中新增一個tabBar選項卡，這個選項卡的路由位址要與uni.switchTab或uni.reLaunch前往的頁面路由位址相同，這樣，當我們點擊這個選項卡時，就會跳到指定頁面，並且保留跳轉前的頁面狀態。

實作步驟：

在manifest.json檔案中新增tabBar選項卡

"tabBar": {
  "color": "#999",
  "selectedColor": "#007AFF",
  "borderStyle": "black",
  "backgroundColor": "#FFFFFF",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/img/tabBar/home.png",
      "selectedIconPath": "static/img/tabBar/home-selected.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "static/img/tabBar/mine.png",
      "selectedIconPath": "static/img/tabBar/mine-selected.png"
    }
  ]
},

登入後複製

在manifest.json檔案中新增了tabBar選項卡，其中包含兩個頁面，分別是首頁和我的頁面。

在跳轉前的頁面中新增一個按鈕，點擊時跳到指定頁面

<template>
  <view class='container'>
    <view class='content'>
      <button class='button' @click='jumpToMine'>跳转到我的页面</button>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      jumpToMine() {
        uni.switchTab({ //注意这里使用了switchTab方法
          url: '/pages/mine/mine'
        })
      }
    }
  }
</script>

<style>
  .container {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
  }

  .content {
    margin-top: 100px;
    text-align: center;
  }

  .button {
    width: 200px;
    height: 50px;
    background-color: #007AFF;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
  }
</style>

登入後複製

透過新增一個按鈕，點擊時使用uni.switchTab方法跳到我的頁面，這裡要注意，不能使用uni.navigateTo或uni.redirectTo方法。

在我的頁面中新增一個tabBar選項卡

<template>
  <view class='container'>
    <view class='content'>
      我的页面
    </view>

    <view class='tabBar'>
      <view class='tabBarItem' @click='jumpToHome'>
        <text class='tabBarIcon'>首页</text>
      </view>

      <view class='tabBarItem tabBarItem-selected'>
        <text class='tabBarIcon'>我的</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      jumpToHome() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    }
  }
</script>

<style>
  .container {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
  }

  .content {
    margin-top: 100px;
    text-align: center;
  }

  .tabBar {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 5px;
    background-color: #FFFFFF;
    border-top: solid 1px #DDDDDD;
  }

  .tabBarItem {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 14px;
    color: #999;
  }

  .tabBarItem-selected {
    color: #007AFF;
  }

  .tabBarIcon {
    font-size: 14px;
  }
</style>

登入後複製

#在我的頁面中，我們新增了一個tabBar選項卡，這個選項卡包含兩個tabBarItem ，分別是首頁和我的，其中我的這個選項卡被設為選取狀態。