Comment partager un menu inférieur dans Uniapp

Avec le développement rapide des appareils mobiles, de plus en plus de développeurs commencent à utiliser uniapp pour le développement multiplateforme. Dans les applications mobiles, le menu inférieur est un composant d'interface utilisateur très courant. Contrairement aux différences entre iOS et Android, l'utilisation d'uniapp peut obtenir une interaction et un style cohérents avec le menu inférieur sur différentes plates-formes, mais comment partager un menu inférieur ? Cet article présentera en détail comment Uniapp implémente un menu inférieur commun.

1. Utilisez le composant de menu inférieur

uniapp fournit le composant officiel de menu inférieur uni-tabbar, qui peut être référencé dans le fichier page.json lors de son utilisation. Le composant de menu inférieur peut réaliser un saut de page en configurant l'attribut pages d'uni-tabbar. Il convient de noter que le composant de menu inférieur ne prend en charge que la configuration de quatre pages à onglet et que chaque page doit être entourée d'une balise de page.

Un exemple est le suivant :

{
  "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"
    }]
  }
}

Lors de l'utilisation du composant de menu du bas, le développeur n'a qu'à configurer l'attribut tabBar correspondant dans le fichier page.json de chaque page. Cependant, puisqu'il est nécessaire de configurer l'attribut tabBar correspondant. dans le fichier page.json de chaque page de configuration, cette méthode est plus lourde et ne convient pas pour partager un menu du bas.

2. Encapsuler le composant du menu inférieur

Certains développeurs choisiront d'encapsuler eux-mêmes le composant du menu inférieur, par exemple en encapsulant le menu inférieur sous la forme d'un composant et en l'introduisant dans les pages qui doivent utiliser le menu inférieur. Bien que cette méthode soit plus pratique, il existe également un travail trivial à effectuer lors de l'encapsulation du composant de menu inférieur dans uniapp.

Tout d'abord, dans le composant du menu inférieur, vous devez utiliser la méthode uni.getSystemInfoSync() de l'uni-api native pour obtenir la hauteur de l'écran de l'appareil et la hauteur du menu inférieur, afin de calculer la hauteur de la page en excluant le menu du bas. Deuxièmement, la hauteur du menu inférieur et la hauteur de la page correspondantes doivent être définies manuellement dans chaque page afin que le défilement normal des pages puisse être obtenu.

L'exemple de code est le suivant :

<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>

Dans chaque page, vous devez écouter l'événement uni.$emit('setPageStyle') et définir le style correspondant en fonction de la hauteur de la page et de la hauteur du menu inférieur pour vous assurer que la page défile normalement.

Bien qu'encapsuler vous-même le composant du menu inférieur puisse être utilisé par le public, il est plus lourd et ne convient pas aux débutants qui ne sont pas familiers avec uniapi en raison de la nécessité de résoudre certains problèmes triviaux.

3. Utiliser des plug-ins

Étant donné que les menus inférieurs sont très courants dans les applications mobiles, de nombreux développeurs ont encapsulé le plug-in du menu inférieur uniapp, ce qui évite aux développeurs un travail trivial. L'utilisation de plug-ins permet d'effectuer des appels rapides et pratiques et de personnaliser facilement les styles et les interactions.

Le plug-in du menu inférieur uniapp est très simple à utiliser. Il vous suffit d'introduire le plug-in correspondant dans le fichier page.json. L'utilisation de plug-ins permet de définir facilement les fonctions et les styles interactifs du menu inférieur, ce qui convient mieux aux débutants qui ne sont pas familiers avec uniapi.

Cet article présente un plug-in de menu inférieur Uniapp "uniui-tabbar", qui est un plug-in de menu inférieur simple et facile à utiliser, facile à utiliser et évolutif. personnalisé.

Vous pouvez rapidement vous familiariser avec l'utilisation d'uniui-tabbar grâce à la documentation officielle :

<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>

Lorsque vous utilisez le plug-in uniui-tabbar, il vous suffit de définir les données du menu inférieur et de transmettre les données à la barre d'onglets Attribut -list. Surveillez l'événement de changement de menu inférieur via l'événement onChange. Lorsque vous changez de menu inférieur, vous pouvez utiliser uni.switchTabAPI pour accéder à la page. Les développeurs doivent uniquement se concentrer sur la définition des données et des styles du menu inférieur, plutôt que d'effectuer divers calculs triviaux et ajustements de style.

Résumé :

Pendant le processus de développement, nous devons choisir la méthode appropriée pour implémenter le menu inférieur commun en fonction de nos besoins réels. Dans Uniapp, il est plus pratique d'utiliser des composants ou des plug-ins officiels. La méthode à choisir dépend de votre situation réelle. Lors de la mise en œuvre d'un menu inférieur commun, essayez de réduire la charge de travail inutile et concentrez-vous sur la réutilisation et la simplicité du code, améliorant ainsi l'efficacité du développement et la lisibilité du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!