uniapp微信小程序写一个悬浮移动的按钮

在uniapp项目中创建一个新的页面，命名为FloatingButton.vue。
在FloatingButton.vue中，添加一个按钮组件，如下：

<template>
  <button class="floating-button" @click="onClick">
    <slot></slot>
  </button>
</template>

在FloatingButton.vue中，添加样式，使按钮悬浮在页面上方，并添加动画效果，如下：

<style scoped>
.floating-button {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #007AFF;
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  animation: floating 2s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

在FloatingButton.vue中，添加点击事件，使按钮在点击时弹出提示信息，如下：

<script>
export default {
  methods: {
    onClick() {
      uni.showToast({
        title: 'Hello World',
        icon: 'none'
      })
    }
  }
}
</script>

在需要使用悬浮按钮的页面中，引入FloatingButton.vue组件，并添加按钮内容，如下：

<template>
  <view>
    <floating-button>
      <text>+</text>
    </floating-button>
  </view>
</template>

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

export default {
  components: {
    FloatingButton
  }
}
</script>

这样，就可以在页面上方添加一个悬浮移动的按钮了。