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

uniapp 如何设置所有页面都有悬浮按钮

在实际开发过程中，很多场景下我们都需要在页面中添加一个悬浮按钮，例如：返回顶部、打开抽屉、拨打电话等等，今天我们来学习如何使用uniapp来设置所有页面都有悬浮按钮。

1. 安装 uniui 插件

需要先安装 uniui （基于 uni-app 的 UI 组件库）插件。如果您还没有安装 uniui，请在命令行执行以下命令安装：

npm install @dcloudio/uni-ui

2. 引入 uniui Button 组件

<template>
  <view>
    <button class="button-position" type="primary" size="default" icon='usefullfill' @click="onClick">点击按钮</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onClick () {
        console.log('click');
      }
    }
  }
</script>
<style>
  .button-position {
    position: fixed;
    right: 50rpx;
    bottom: 100rpx;
  }
</style>

3. 全局组件方式引入

定义一个全局组件 `GlobalButton.vue`，并通过在`main.js`文件中进行全局注册。

<template>
  <view>
    <button class="button-position" type="primary" size="default" icon='usefullfill' @click="onClick">点击按钮</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onClick () {
        console.log('click');
      }
    }
  }
</script>
<style>
  .button-position {
    position: fixed;
    right: 50rpx;
    bottom: 100rpx;
  }
</style>

在 main.js 文件中引入 GlobalButton 组件并进行全局注册：

// 引入 GlobalButton 组件
import GlobalButton from './components/GlobalButton.vue'
Vue.component('GlobalButton', GlobalButton)

在使用的时候，只需要在需要的页面中添加以下代码即可：

<!-- index.vue -->
<template>
  <view>
    <global-button></global-button>
    <h2>这是 index 页面</h2>
    ...
  </view>
</template>
<script>
  export default {}
</script>
<style></style>

这样，所有的页面都会自动添加一个悬浮按钮。同时，我们也可以对组件样式进行调整来适配我们的实际需求。

4. 总结

通过以上方法，我们成功实现了在所有页面中添加一个悬浮按钮的需求。如果您还没有尝试 uniapp 开发，建议您前往 uniapp 官网进行学习。