uniapp のすべてのページにフローティング ボタンを設定する方法

モバイル APP の人気に伴い、独自のモバイル APP を開発し始める企業や個人が増えています。開発者にとって、より良いユーザー エクスペリエンスを提供することは非常に重要です。フローティング ボタンは、より良いユーザー エクスペリエンスを提供する方法です。今回はuniappの全ページにフローティングボタンを設置する方法についてお話します。

Uniapp は、開発者が一連のコードを使用して、iOS や Android などのさまざまなプラットフォーム向けの APP を開発できるクロスプラットフォーム開発フレームワークです。さらに、uniapp フレームワークには、一般的に使用される多くのコンポーネントを提供する一連のコンポーネント ライブラリがあります。 icno アイコン、ボタンなど。したがって、フローティング ボタンの実装は難しくありません。

まず、uniapp で新しい .vue ファイルを作成して、フローティング ボタン コンポーネントを実装する必要があります。コードは次のとおりです。

<template>
  <div class="float-button" @click="buttonClick">
    <icon type="add" size="28px" color="#fff" />
  </div>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
  components: { uniIcons },
  methods: {
    buttonClick() {
      // 点击事件
    }
  }
}
</script>

<style>
.float-button {
  position: fixed;
  right: 20px;
  bottom: 60px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #007aff;
  text-align: center;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
  z-index: 999;
}
</style>

このコードは、uni-icons コンポーネントと青い背景の丸いボタンを含むフローティング ボタン コンポーネントを定義します。

次に、このコンポーネントをすべてのページで使用する必要があります。

app.vue では、ページのレンダリング前にこのコンポーネントを導入します。コードは次のとおりです。

<template>
  <div>
    <float-button />
    <router-view />
  </div>
</template>

<script>
import FloatButton from '@/components/float-button.vue'
export default {
  components: { FloatButton }
}
</script>

このコードは、FloatButton コンポーネントと router-view コンポーネントを含む app.vue のテンプレートを定義します。

最後に、フローティング ボタン コンポーネントをすべてのページの .vue ファイルにインポートし、 を