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，分别是首页和我的，其中我的这个选项卡被设为选中状态。