How does uniapp return after jumping without refreshing?

Preface

As a cross-platform development framework, Uniapp has been accepted and used by more and more developers. In Uniapp, page jump is a very common operation. After page jump, sometimes it is necessary to retain the status of the original page, so that the next time you return to this page, you do not need to reload the data or perform some complicated operations again. operation. So, how to achieve the effect of returning without refreshing after jumping in Uniapp? This article will introduce it to you in detail.

Uniapp page jump

To perform page jump in Uniapp, we usually use the uni.navigateTo or uni.redirectTo method. Their specific differences are as follows:

1. uni.navigateTo

When using the uni.navigateTo method to jump to a page, a new page will be added to the top of the stack of the current page. This new page will cover part of the current page, as follows As shown in the picture:

As you can see, we use uni.navigateTo in page A to jump to page B, and add a new content to page B. This The content will appear on top of page A, and when we return to page A, page B will be destroyed. The whole process is like a stack structure.

2. uni.redirectTo

The difference from uni.navigateTo is that when using uni.redirectTo to jump to a page, the current page will be deleted and then jumped to A new page, as shown below:

As you can see, we used uni.redirectTo in page A to jump to page B, and added in page B A new content, but when we return to page A, page B has been destroyed, and the whole process is like a queue.

How to achieve the effect of returning without refreshing after jumping

Through the above introduction, we can know that when we need the effect of returning without refreshing after jumping, we cannot directly use uni.navigateTo or uni .redirectTo method, because both methods will destroy the page before the jump. So, how to achieve this?

Implementation ideas:

Go to the specified page through the uni.switchTab or uni.reLaunch method. These two methods have one feature, that is, no matter how you jump, the page will be refreshed, so pay attention You cannot use uni.navigateTo or uni.redirectTo methods here.

Add a tabBar tab to the page that needs to be jumped. The routing address of this tab must be the same as the routing address of the page that uni.switchTab or uni.reLaunch goes to. In this way, when we click this tab , it will jump to the specified page and retain the page status before the jump.

Implementation steps:

1. Add the tabBar tab in the manifest.json file

"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"
    }
  ]
},

Add the tabBar tab in the manifest.json file, It contains two pages, namely the home page and my page.

2. Add a button to the page before jumping and jump to the specified page when clicked

<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>

By adding a button, use the uni.switchTab method to jump when clicked Go to my page. Note here that you cannot use the uni.navigateTo or uni.redirectTo method.

3. Add a tabBar tab to my page

<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>

In my page, we added a tabBar tab, which contains two tabBarItem , respectively the home page and mine, in which this tab of mine is set to the selected state.

4. Effect Demonstration

Here I will show you the effect:

https://img-blog.csdn.net/20190118135008629?watermark/2 /text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jsb2dwYW5fY2xvdWQ=/

The above is the entire content of this article. Through studying this article, I believe you have mastered how to achieve the effect of returning without refreshing after jumping in Uniapp. I hope to be helpful.

The above is the detailed content of How does uniapp return after jumping without refreshing?. For more information, please follow other related articles on the PHP Chinese website!