유니앱에서 하단 메뉴를 공유하는 방법

모바일 장치의 급속한 발전으로 인해 점점 더 많은 개발자가 크로스 플랫폼 개발에 uniapp을 사용하기 시작했습니다. 모바일 애플리케이션에서 하단 메뉴는 매우 일반적인 UI 구성 요소입니다. iOS와 Android의 차이점과 달리 uniapp을 사용하면 다양한 플랫폼에서 일관된 하단 메뉴 상호 작용과 스타일을 얻을 수 있지만 하단 메뉴를 공유하는 방법은 무엇입니까? 이번 글에서는 uniapp에서 공통 하단 메뉴를 구현하는 방법을 자세히 소개하겠습니다.

1. 하단 메뉴 컴포넌트 사용

uniapp에서는 공식 하단 메뉴 컴포넌트 uni-tabbar를 제공하는데, 이는 사용 시 page.json 파일에서 참조할 수 있습니다. 하단 메뉴 컴포넌트는 유니탭바의 페이지 속성을 설정하여 페이지 점프를 구현할 수 있습니다. 하단 메뉴 구성 요소는 4개의 탭 페이지 구성만 지원하며 각 페이지는 페이지 태그로 래핑되어야 합니다.

예는 다음과 같습니다.

{
  "tabBar": {
    "color":"#999",
    "selectedColor":"#007aff",
    "borderStyle":"black",
    "backgroundColor":"#f9f9f9",
    "list":[{
      "pagePath":"pages/home/index",
      "text":"首页",
      "iconPath":"/static/tabbar/home.png",
      "selectedIconPath":"/static/tabbar/home_active.png"
    },{
      "pagePath":"pages/category/index",
      "text":"分类",
      "iconPath":"/static/tabbar/category.png",
      "selectedIconPath":"/static/tabbar/category_active.png"
    },{
      "pagePath":"pages/cart/index",
      "text":"购物车",
      "iconPath":"/static/tabbar/cart.png",
      "selectedIconPath":"/static/tabbar/cart_active.png"
    },{
      "pagePath":"pages/user/index",
      "text":"我的",
      "iconPath":"/static/tabbar/user.png",
      "selectedIconPath":"/static/tabbar/user_active.png"
    }]
  }
}

하단 메뉴 구성 요소를 사용할 때 개발자는 각 페이지의 page.json 파일에서 해당 tabBar 속성만 구성하면 됩니다. 각 페이지 구성의 page.json 파일을 사용하는 경우 이 방법은 더 번거롭고 하단 메뉴를 공유하는 데 적합하지 않습니다.

2. 하단 메뉴 구성요소 캡슐화

일부 개발자는 하단 메뉴를 구성요소 형태로 캡슐화하고 하단 메뉴를 사용해야 하는 페이지에 도입하는 등 하단 메뉴 구성요소 자체를 캡슐화하기로 선택합니다. 이 방법이 더 편리하기는 하지만 uniapp의 하단 메뉴 구성 요소를 캡슐화하기 위해 수행해야 하는 몇 가지 사소한 작업도 있습니다.

먼저 하단 메뉴 컴포넌트에서 네이티브 uni-api의 uni.getSystemInfoSync() 메소드를 사용하여 기기 화면 높이와 하단 메뉴 높이를 가져와서 페이지 높이를 제외한 페이지 높이를 계산해야 합니다. 하단 메뉴. 둘째, 정상적인 페이지 스크롤이 가능하도록 해당 하단 메뉴 높이와 페이지 높이를 각 페이지에서 수동으로 설정해야 합니다.

샘플 코드는 다음과 같습니다.

<template>
  <view class="wrapper">
    <slot></slot>
    <view class="tabbar" :style="{ height: tabBarHeight + 'px' }">
      <!-- 底部菜单内容 -->
    </view>
  </view>
</template>

<script>
  import api from '@/utils/api'
  export default {
    data() {
      return {
        tabBarHeight: 0
      }
    },
    mounted() {
      this.getSystemInfo()
    },
    methods: {
      getSystemInfo() { // 获取设备信息
        const systemInfo = uni.getSystemInfoSync()
        this.tabBarHeight = api.pxToRpx(systemInfo.screenHeight - systemInfo.safeArea.bottom)
        this.setPageStyle()
      },
      setPageStyle() { // 设置页面样式
        uni.createSelectorQuery().select('.wrapper').boundingClientRect(rect => {
          const height = api.pxToRpx(rect.height)
          uni.$emit('setPageStyle', {height: height, tabBarHeight: this.tabBarHeight})
        }).exec()
      }
    }
  }
</script>

<style>
  .wrapper {
    height: 100%;
  }
  .tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: #fff;
    border-top: 1px solid #ddd;
    text-align: center;
  }
</style>

각 페이지에서 uni.$emit('setPageStyle') 이벤트를 수신하고 페이지 높이와 하단 메뉴 높이에 따라 해당 스타일을 설정해야 합니다. 페이지가 정상적으로 스크롤됩니다.

하단 메뉴 구성요소를 직접 캡슐화하면 공개적으로 사용할 수 있지만, 몇 가지 사소한 문제를 처리해야 하기 때문에 더 번거롭고 uniapi에 익숙하지 않은 초보자에게는 적합하지 않습니다.

3. 플러그인 사용

하단 메뉴는 모바일 애플리케이션에서 매우 일반적이므로 많은 개발자가 uniapp 하단 메뉴 플러그인을 캡슐화하여 개발자의 사소한 작업을 줄여줍니다. 플러그인을 사용하면 빠르고 편리하게 통화할 수 있으며 스타일과 상호 작용을 쉽게 사용자 정의할 수 있습니다.

uniapp 하단 메뉴 플러그인은 page.json 파일에 해당 플러그인을 도입하기만 하면 됩니다. 플러그인을 사용하면 하단 메뉴의 대화형 기능과 스타일을 쉽게 설정할 수 있어 uniapi에 익숙하지 않은 초보자에게 더 적합합니다.

이 기사에서는 사용 편의성과 확장성을 갖춘 간단하고 사용하기 쉬운 하단 메뉴 플러그인인 uniapp 하단 메뉴 플러그인 "uniui-tabbar"를 소개합니다. 맞춤형.

공식 문서를 통해 uniui-tabbar 사용에 빠르게 익숙해질 수 있습니다:

<template>
  <view>
    <!-- 页面内容 -->
  </view>
  <uniui-tabbar :active="active" :tab-bar-list="tabBar.list" @onChange="onChange"></uniui-tabbar>
</template>

<script>
  export default {
    data() {
      return {
        active: 0,
        tabBar: {
          color:"#999",
          selectedColor:"#007aff",
          borderStyle:"black",
          backgroundColor:"#f9f9f9",
          list:[{
            "text":"首页",
            "iconPath":"/static/tabbar/home.png",
            "selectedIconPath":"/static/tabbar/home_active.png"
          },{
            "text":"分类",
            "iconPath":"/static/tabbar/category.png",
            "selectedIconPath":"/static/tabbar/category_active.png"
          },{
            "text":"购物车",
            "iconPath":"/static/tabbar/cart.png",
            "selectedIconPath":"/static/tabbar/cart_active.png"
          },{
            "text":"我的",
            "iconPath":"/static/tabbar/user.png",
            "selectedIconPath":"/static/tabbar/user_active.png"
          }]
        }
      }
    },
    methods: {
      onChange(index) {
        this.active = index
        uni.switchTab({
          url: '/' + this.tabBar.list[index].pagePath
        })
      }
    }
  }
</script>

uniui-tabbar 플러그인을 사용할 때 하단 메뉴 데이터를 설정하고 데이터를 탭바에 전달하기만 하면 됩니다. -목록 속성. onChange 이벤트를 통해 하단 메뉴 전환 이벤트를 모니터링합니다. 하단 메뉴 전환 시 uni.switchTabAPI를 사용하여 해당 페이지로 이동할 수 있습니다. 개발자는 다양한 사소한 계산과 스타일 조정을 수행하기보다는 하단 메뉴 데이터 및 스타일 정의에만 집중하면 됩니다.

요약:

개발 과정에서 실제 요구 사항에 따라 공통 하단 메뉴를 구현하는 적절한 방법을 선택해야 합니다. 유니앱에서는 공식 컴포넌트나 플러그인을 사용하는 것이 더 편리합니다. 어떤 방법을 선택할지는 실제 상황에 따라 다릅니다. 공통 하단 메뉴 구현 시 불필요한 작업량을 줄이고 코드 재사용 및 코드 단순성에 중점을 두어 개발 효율성과 코드 가독성을 향상시키도록 노력하세요.

위 내용은 유니앱에서 하단 메뉴를 공유하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!