How to set all pages in uniapp to have floating buttons

With the popularity of mobile APPs, more and more companies and individuals have begun to develop their own mobile APPs. For developers, providing a better user experience is crucial. The floating button is a way to provide a better user experience. Today, I will talk about how to set up floating buttons on all pages in uniapp.

Uniapp is a cross-platform development framework that allows developers to use a set of codes to develop APPs for various platforms such as iOS and Android. Moreover, the uniapp framework has a set of component libraries that provide many commonly used components. Such as icno icons, buttons, etc. Therefore, it is not difficult to implement floating buttons.

First, we need to create a new .vue file in uniapp to implement the floating button component. The code is as follows:

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

This code defines a floating button component, which contains a uni-icons component and a round button with a blue background.

Next, we need to use this component in all pages.

In app.vue, introduce this component before page rendering. The code is as follows:

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

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

This code defines the template of app.vue, which contains the FloatButton component and the router-view component.

Finally, import the floating button component into all page .vue files and insert into