Uniappでカスタムボタンジャンプを実装する方法-uni-app-php.cn

Uniappでカスタムボタンジャンプを実装する方法

PHPz

リリース： 2023-04-14 13:39:30

オリジナル

870 人が閲覧しました

モバイルインターネットの発展に伴い、モバイルアプリケーション開発が徐々に話題になってきました。 Uniapp は、クロスプラットフォーム開発フレームワークとして、モバイルアプリケーションの開発で非常に人気があります。今回はUniapp開発におけるカスタムボタンジャンプ機能を紹介します。

Uniapp の組み込みルーティング機能はページ間をジャンプできますが、別のページにジャンプするために複数のカスタムボタンをページに追加する必要がある場合、どのように実装すればよいでしょうか?以下では、例を使用して、Uniapp でカスタムボタンジャンプを実装する方法を紹介します。

まず、Uniapp プロジェクトを作成した後、pages フォルダーに 2 つのページ (index と page1) を作成する必要があります。このうち、index はデフォルトのページで、page1 はジャンプ先のページです。

インデックスページには、「ページ 1 にジャンプ」と「ページ 2 にジャンプ」という 2 つのカスタムボタンを追加する必要があります。具体的なコードは次のとおりです。

<template>
  <view class="container">
    <view class="btns">
      <view class="btn" @click="toPage1">跳转到page1页面</view>
      <view class="btn" @click="toPage2">跳转到page2页面</view>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      toPage1() {
        uni.navigateTo({
          url: '/pages/page1/page1'
        })
      },
      toPage2() {
        uni.navigateTo({
          url: '/pages/page2/page2'
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .btns {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .btn {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

ログイン後にコピー

上記のコードにより、ページに 2 つのボタンを追加し、ボタンをクリックして page1 と page2 にジャンプする機能を実装することができました。

最後に、page1 ページに、インデックスページに戻るための戻るボタンを追加できます。具体的なコードは以下の通りです。

<template>
  <view class="container">
    <view class="title">这是page1页面</view>
    <view class="btn" @click="back">返回</view>
  </view>
</template>

<script>
  export default {
    methods: {
      back() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
  }
  .btn {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

ログイン後にコピー

上記のコードにより、page1ページに戻るボタンを追加し、ボタンをクリックするとインデックスページに戻る機能を実現することができました。

要約すると、上記のサンプルコードを通じて、Uniapp にカスタムボタンジャンプ機能を正常に実装できます。これにより、アプリケーションの対話性が向上するだけでなく、アプリケーションのユーザーエクスペリエンスも向上します。

以上がUniappでカスタムボタンジャンプを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。