首页 > web前端 > uni-app > 正文

uniapp怎么设置所有页面都有悬浮按钮

PHPz
发布: 2023-04-20 15:22:34
原创
4251 人浏览过

随着手机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文件中导入浮动按钮组件,并在