uniapp의 모든 페이지에 플로팅 버튼이 있도록 설정하는 방법

모바일 앱의 인기로 인해 점점 더 많은 기업과 개인이 자체 모바일 앱을 개발하기 시작했습니다. 개발자에게는 더 나은 사용자 경험을 제공하는 것이 중요합니다. 플로팅 버튼은 더 나은 사용자 경험을 제공하는 방법입니다. 오늘은 유니앱의 모든 페이지에 플로팅 버튼을 설정하는 방법에 대해 말씀드리겠습니다.

uniapp은 개발자가 코드 세트를 사용하여 iOS, Android 등 다양한 플랫폼용 앱을 개발할 수 있는 크로스 플랫폼 개발 프레임워크입니다. 또한 uniapp 프레임워크에는 일반적으로 사용되는 많은 구성 요소를 제공하는 구성 요소 라이브러리 세트가 있습니다. 아이콘 아이콘, 버튼 등 따라서 플로팅 버튼을 구현하는 것은 어렵지 않습니다.

먼저 플로팅 버튼 구성 요소를 구현하려면 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>

이 코드는 유니 아이콘 구성 요소와 파란색 배경의 둥근 버튼이 포함된 플로팅 버튼 구성 요소를 정의합니다.

다음으로 모든 페이지에서 이 구성 요소를 사용해야 합니다.

app.vue에서 페이지가 렌더링되기 전에 이 구성 요소를 소개하세요. 코드는 다음과 같습니다.

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

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

이 코드는 FloatButton 구성 요소와 router-view 구성 요소가 포함된 app.vue의 템플릿을 정의합니다.

마지막으로 플로팅 버튼 구성 요소를 모든 페이지 .vue 파일로 가져오고