uniappは現在のページを閉じずに非表示にします

モバイル開発テクノロジーの継続的な開発により、クロスプラットフォーム開発ツールはますます成熟し、完璧になってきています。その中でも、UniApp は中国で最も人気のあるクロスプラットフォームモバイル開発フレームワークの 1 つであり、高効率、シンプルさ、使いやすさの特徴を備えており、開発者にとって最適な選択肢となっています。

開発では、現在のページを閉じずに非表示にする必要があるというニーズに遭遇することがよくあります。たとえば、新しいページを開いた後、現在のページを非表示にする必要がありますが、この機能を実現するにはいくつかのスキルを習得する必要があります。

1. vue-router のルーティング モード

まず最初に、uniapp は Vue フレームワークに基づいており、vue-router は Vue フレームワークで使用されていることを知っておく必要があります。現在のページを非表示にする機能は、vue-router のルーティング モードを通じて実装されます。具体的な方法は次のとおりです。

1. router/index.js ファイルでルーティング モードを履歴に設定します。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
   mode: 'history',
   routes: [
  {
     path: '/login',
     name: 'Login',
     component: () => import('@/views/Login/Login')
  },
    // 其他路由配置...
   ]
})

2. これを非表示にする必要がある場合に使用します。 $router.push は、ルートジャンプを実装します

this.$router.push({ path: '/home', query: { isHide: true }})

クエリ パラメータは、データを渡すために使用されるオブジェクトです。ここでは、isHide フィールドを設定して、現在のページを非表示にする必要があるパラメーターをマークします。

3. 非表示ページでは、watch を使用してルーティングの変更を監視します

watch: {
   '$route' () {
      if (this.$route.query.isHide) {
         this.$refs.currentView.style.display = 'none'
      }
   }
}

ここでは、watch を使用してルーティングの変更を監視します。isHide が true の場合、スタイルを変更します。現在のページは非表示になります。

2. Vue で v-show コマンドを使用する

vue-router を使用してルーティング ジャンプを実装し、現在のページを非表示にすることに加えて、Vue で v-show コマンドを使用することもできます。シンプルな実装を実現します。具体的な方法は次のとおりです。

1. 現在のページを非表示にする必要がある場合、$emit を使用してカスタム イベントをトリガーします。

this.$emit('hide')

2. Use the v-親コンポーネントの show ディレクティブ 現在のページを制御するには

<template>
  <div>
    <div v-show="showCurrentPage">
      <!-- 当前页面内容 -->
    </div>

    <div v-show="showNewPage">
      <!-- 新页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showCurrentPage: true, // 是否显示当前页面
      showNewPage: false // 是否显示新页面
    }
  },
  mounted () {
    // 监听自定义事件
    this.$on('hide', () => {
      this.showCurrentPage = false
    })
  }
}
</script>

ここでは、$emit を通じてカスタム イベントをトリガーし、親コンポーネントでイベントをリッスンして、現在のページを非表示にする機能を実現します。 showCurrentPage 変数の値を制御することで、現在のページを表示するかどうかを制御できます。同時に、このメソッドを使用して、新しいページを表示するかどうかを制御することもできます。

概要

Vue-router のルーティング モードと v-show ディレクティブを使用すると、現在のページを非表示にする機能を簡単に実装できます。もちろん、具体的な実装方法は実際のニーズに応じて調整する必要があります。

上記の方法で現在のページを非表示にする場合、現在のページのメモリは解放されないので、現在のページが不要になった場合は破棄することをお勧めします。メモリ リークの発生を避けるために手動で実行します。

以上がuniappは現在のページを閉じずに非表示にしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。