uni-app 基于开发悬浮插件

在基于uni-app开发悬浮插件时，你可以利用uni-app提供的自定义组件和API来实现悬浮效果。以下是一个简单的代码示例，展示了如何创建一个悬浮按钮插件，并在页面中使用它。

1. 创建悬浮按钮组件

首先，在components目录下创建一个名为FloatingButton.vue的组件文件。

<template>
  <view class="floating-button" :style="buttonStyle">
    <button @click="handleClick">悬浮按钮</button>
  </view>
</template>

<script>
export default {
  props: {
    position: {
      type: String,
      default: 'bottom-right'
    },
    offset: {
      type: Array,
      default: () => [20, 20]
    }
  },
  computed: {
    buttonStyle() {
      const style = {};
      if (this.position === 'bottom-right') {
        style.position = 'fixed';
        style.right = `${this.offset[0]}px`;
        style.bottom = `${this.offset[1]}px`;
      }
      // 可以根据需要添加其他位置样式
      return style;
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style scoped>
.floating-button button {
  width: 60px;
  height: 60px;
  background-color: #1aad19;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
}
</style>

2. 在页面中使用悬浮按钮组件

接下来，在你的页面文件中（如pages/index/index.vue）引入并使用这个组件。

<template>
  <view>
    <!-- 页面内容 -->
    <floating-button @click="onFloatingButtonClick" position="bottom-right" :offset="[30, 30]"></floating-button>
  </view>
</template>

<script>
import FloatingButton from '@/components/FloatingButton.vue';

export default {
  components: {
    FloatingButton
  },
  methods: {
    onFloatingButtonClick() {
      uni.showToast({
        title: '悬浮按钮被点击',
        icon: 'success'
      });
    }
  }
};
</script>

<style>
/* 页面样式 */
</style>

总结

上述代码展示了如何在uni-app中创建一个简单的悬浮按钮插件，并在页面中使用它。你可以根据需要进一步自定义悬浮按钮的样式和功能，如添加动画效果、改变按钮图标等。通过position和offset属性，你可以灵活地控制悬浮按钮在页面上的位置。