更新せずにジャンプした後、uniapp はどのようにして戻りますか?

はじめに

Uniapp は、クロスプラットフォーム開発フレームワークとして、ますます多くの開発者に受け入れられ、使用されています。 Uniapp では、ページ ジャンプは非常に一般的な操作です。ページ ジャンプ後、次回このページに戻ったときにデータを再読み込みしたり、何らかの操作を実行したりする必要がないように、元のページのステータスを保持する必要がある場合があります。また複雑な操作です。では、ユニアプリにジャンプした後、リフレッシュせずに戻る効果を実現するにはどうすればよいでしょうか?この記事では詳しく紹介していきます。

Uniapp ページ ジャンプ

Uniapp でページ ジャンプを実行するには、通常、uni.navigateTo メソッドまたは uni.redirectTo メソッドを使用します。それぞれの具体的な違いは次のとおりです。 #uni.navigateTo

1. uni.navigateTo メソッドを使用してページにジャンプすると、現在のページのスタックの一番上に新しいページが追加されます。この新しいページには、次のページの一部が含まれます。現在のページは次のようになります。図に示すように:

ご覧のとおり、ページ A で uni.navigateTo を使用してページ B にジャンプし、新しいページを追加します。これは、コンテンツがページ A の上に表示され、ページ A に戻るとページ B が破棄されるという、全体のプロセスがスタック構造のようなものです。

uni.redirectTo

2. uni.navigateTo との違いは、uni.redirectTo を使用してページにジャンプすると、現在のページが削除されてからジャンプされることです。以下に示すような新しいページ:

ご覧のとおり、ページ A で uni.redirectTo を使用してページ B にジャンプし、ページ B に新しいコンテンツを追加しました。 , しかし、ページ A に戻ると、ページ B は破棄されており、プロセス全体がキューのような状態になっています。

ジャンプ後にリフレッシュせずに戻るエフェクトを実現する方法

上記の導入により、ジャンプ後にリフレッシュせずに戻るエフェクトが必要な場合、uniを直接使用できないことがわかります。 navigateTo メソッドまたは uni .redirectTo メソッド。どちらのメソッドもジャンプ前にページを破棄するためです。では、どうすればこれを達成できるでしょうか?

実装アイデア:

uni.switchTab または uni.reLaunch メソッドを通じて指定されたページに移動します。これら 2 つのメソッドには 1 つの特徴があります。ここでは 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"
    }
  ]
},

1. manifest.json ファイルに tabBar タブを追加します。ホームページとマイページの 2 つのページが含まれています。

ジャンプ前のページにボタンを追加し、クリックすると指定したページにジャンプします

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

2. ボタンを追加することで、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>

3. 私のページに、2 つの tabBarItem (それぞれホームページと私のもの) を含む tabBar タブを追加しました。私のタブは選択状態に設定されています。

効果のデモンストレーション

4. ここで効果を紹介します:

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

上記がこの記事の全内容です。この記事を学習することで、ユニアプリでジャンプした後にリフレッシュせずに戻る効果を達成する方法を習得したと思います。お役に立てれば幸いです。

以上が更新せずにジャンプした後、uniapp はどのようにして戻りますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。