Comment Uniapp revient-il après un saut sans actualisation ?

Avant-propos

En tant que framework de développement multiplateforme, Uniapp a été accepté et utilisé par de plus en plus de développeurs. Dans Uniapp, le saut de page est une opération très courante. Après le saut de page, il est parfois nécessaire de conserver l'état de la page d'origine, de sorte que la prochaine fois que vous reviendrez sur cette page, vous n'aurez pas besoin de recharger les données ou d'en effectuer certaines. opération encore compliquée. Alors, comment obtenir l'effet de retour sans rafraîchir après avoir sauté dans Uniapp ? Cet article vous le présentera en détail.

Saut de page Uniapp

Pour accéder à une page dans Uniapp, nous utilisons généralement la méthode uni.navigateTo ou uni.redirectTo. Leurs différences spécifiques sont les suivantes :

1. uni.navigateTo

Utilisez la méthode uni.navigateTo. vers la page Lors du saut, une nouvelle page sera ajoutée en haut de la pile de la page en cours. Cette nouvelle page couvrira une partie de la page en cours, comme le montre la figure ci-dessous :

Comme vous pouvez le voir, nous utilisons uni dans la page A .navigateTo passe à la page B, ajoutant un nouveau contenu à la page B. Ce contenu apparaîtra en haut de la page A, et lorsque nous reviendrons à la page A, la page B sera détruite. une pile. La structure est la même.

2. uni.redirectTo

La différence avec uni.navigateTo est que lorsque vous utilisez uni.redirectTo pour accéder à une page, la page actuelle sera supprimée puis passera à une nouvelle page, comme le montre la figure ci-dessous :

Vous pouvez voir que nous utilisons uni.redirectTo dans la page A pour accéder à la page B et ajouter un nouveau contenu à la page B, mais lorsque nous revenons à la page A, la page B a été détruite et la page entière a été détruit. Le processus est comme une file d’attente.

Comment obtenir l'effet de retour sans rafraîchissement après le saut

Grâce à l'introduction ci-dessus, nous pouvons savoir que lorsque nous avons besoin de l'effet de retour sans rafraîchissement après le saut, nous ne pouvons pas utiliser directement la méthode uni.navigateTo ou uni.redirectTo, car ces deux méthodes All détruiront la page avant le saut. Alors, comment y parvenir ?

Idée d'implémentation :

Accédez à la page spécifiée via la méthode uni.switchTab ou uni.reLaunch. Ces deux méthodes ont une fonctionnalité, c'est-à-dire que peu importe la façon dont vous sautez, la page sera actualisée, alors faites attention à ne pas le faire. utilisez la méthode uni.navigateTo ou uni.navigateTo ici.

Ajoutez un onglet tabBar à la page qui doit être sautée. L'adresse de routage de cet onglet doit être la même que l'adresse de routage de la page vers laquelle uni.switchTab ou uni.reLaunch va de cette façon, lorsque nous cliquons. cet onglet, il sautera à la page spécifiée et conservera l'état de la page avant de sauter.

Étapes de mise en œuvre :

1. Ajoutez l'onglet tabBar dans le fichier manifest.json

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

Ajoutez l'onglet tabBar dans le fichier manifest.json, qui contient deux pages, à savoir la page d'accueil et ma page.

2. Ajoutez un bouton à la page avant de sauter et passez à la page spécifiée lorsque vous cliquez dessus

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

En ajoutant un bouton, utilisez la méthode uni.switchTab pour accéder à ma page lorsque vous cliquez dessus. Notez ici qu'il ne peut pas être utilisé uni. Méthode .navigateTo ou uni.redirectTo.

3. Ajouter un onglet tabBar à ma 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>

Dans ma page, nous avons ajouté un onglet tabBar Cet onglet contient deux tabBarItems, à savoir la page d'accueil et la mienne, parmi lesquelles la mienne est L'onglet est défini sur l'état sélectionné.

4. Démonstration d'effet

Ici, je vais vous montrer l'effet :

https://img-blog.csdn.net/20190118135008629?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jsb2dwYW5 fY2xv dWQ=/

Ce qui précède est l'intégralité du contenu de cet article. En étudiant cet article, je pense que vous avez maîtrisé comment obtenir l'effet de retour sans actualisation après avoir sauté dans Uniapp. J'espère que cela aide tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!