uniapp怎麼設定所有頁面都有懸浮按鈕-uni-app-PHP中文網

隨著手機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>

登入後複製

這段程式碼，定義了app.vue的模板，其中包含了FloatButton元件和router-view元件。

最後，在所有的頁面.vue檔案中導入浮動按鈕元件，並在