So teilen Sie ein unteres Menü in Uniapp

Mit der rasanten Entwicklung mobiler Geräte beginnen immer mehr Entwickler, Uniapp für die plattformübergreifende Entwicklung zu verwenden. In mobilen Anwendungen ist das untere Menü eine sehr häufige UI-Komponente. Anders als bei iOS und Android kann mit uniapp eine einheitliche Interaktion und ein einheitlicher Stil des unteren Menüs auf verschiedenen Plattformen erreicht werden. Aber wie teilt man ein unteres Menü? In diesem Artikel wird detailliert beschrieben, wie Uniapp ein gemeinsames unteres Menü implementiert.

1. Verwenden Sie die untere Menükomponente.

uniapp stellt die offizielle untere Menükomponente uni-tabbar bereit, auf die bei Verwendung in der Datei page.json verwiesen werden kann. Die untere Menükomponente kann einen Seitensprung realisieren, indem sie das Seitenattribut von Uni-Tabbar konfiguriert. Es ist zu beachten, dass die untere Menükomponente nur die Konfiguration von vier Registerkarten unterstützt und jede Seite mit einem Seiten-Tag umschlossen werden muss.

Ein Beispiel ist wie folgt:

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

Bei Verwendung der unteren Menükomponente müssen Entwickler jedoch nur das entsprechende tabBar-Attribut in der page.json-Datei jeder Seite konfigurieren Die page.json-Datei jeder Seite konfigurieren. Diese Methode ist umständlicher und nicht für die gemeinsame Nutzung eines unteren Menüs geeignet.

2. Kapseln Sie die untere Menükomponente.

Einige Entwickler entscheiden sich dafür, die untere Menükomponente selbst zu kapseln, z. B. indem sie das untere Menü in Form einer Komponente kapseln und sie in Seiten einführen, die das untere Menü verwenden müssen. Obwohl diese Methode bequemer ist, müssen auch einige triviale Arbeiten durchgeführt werden, um die untere Menükomponente in uniapp zu kapseln.

Zunächst müssen Sie in der unteren Menükomponente die Methode uni.getSystemInfoSync() der nativen Uni-API verwenden, um die Bildschirmhöhe des Geräts und die Höhe des unteren Menüs abzurufen und so die Seitenhöhe ohne die zu berechnen unteres Menü. Zweitens müssen die entsprechende Höhe des unteren Menüs und die Seitenhöhe auf jeder Seite manuell eingestellt werden, damit ein normales Scrollen der Seite erreicht werden kann.

Der Beispielcode lautet wie folgt:

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

Auf jeder Seite müssen Sie das Ereignis uni.$emit('setPageStyle') abhören und den entsprechenden Stil entsprechend der Seitenhöhe und der Höhe des unteren Menüs festlegen, um dies sicherzustellen Die Seite scrollt normal.

Obwohl die Kapselung der unteren Menükomponente selbst eine öffentliche Nutzung ermöglichen kann, ist sie umständlicher und nicht für Anfänger geeignet, die mit Uniapi nicht vertraut sind, da sie sich mit einigen trivialen Problemen befassen müssen.

3. Plug-Ins verwenden

Da untere Menüs in mobilen Anwendungen sehr verbreitet sind, haben viele Entwickler das uniapp-Bottom-Menü-Plug-in gekapselt, was Entwicklern triviale Arbeit erspart. Durch die Verwendung von Plug-Ins können schnelle und bequeme Anrufe erzielt und Stile und Interaktionen einfach angepasst werden.

Das untere Menü-Plug-in von uniapp ist sehr einfach zu verwenden. Sie müssen lediglich das entsprechende Plug-in in die Datei page.json einführen. Mithilfe von Plug-Ins können die interaktiven Funktionen und Stile des unteren Menüs einfach festgelegt werden, was eher für Anfänger geeignet ist, die mit uniapi nicht vertraut sind.

In diesem Artikel wird ein Uniapp-Plugin für das untere Menü „uniui-tabbar“ vorgestellt, bei dem es sich um ein einfaches und benutzerfreundliches Plug-in für das untere Menü mit einfacher Verwendung und Skalierbarkeit handelt individuell angepasst.

Über die offizielle Dokumentation können Sie sich schnell mit der Verwendung von Uniui-Tabbar vertraut machen:

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

Bei Verwendung des Uniui-Tabbar-Plug-Ins müssen Sie nur die Daten im unteren Menü festlegen und die Daten an die Tab-Leiste übergeben -list-Attribut. Überwachen Sie das Ereignis zum Wechseln des unteren Menüs über das Ereignis onChange. Beim Wechseln des unteren Menüs können Sie uni.switchTabAPI verwenden, um zur Seite zu springen. Entwickler müssen sich nur auf die Definition der Daten und Stile des unteren Menüs konzentrieren, anstatt verschiedene triviale Berechnungen und Stilanpassungen durchzuführen.

Zusammenfassung:

Während des Entwicklungsprozesses müssen wir die geeignete Methode zur Implementierung des gemeinsamen unteren Menüs basierend auf unseren tatsächlichen Anforderungen auswählen. In Uniapp ist es bequemer, offizielle Komponenten oder Plug-Ins zu verwenden. Welche Methode Sie wählen, hängt von Ihrer tatsächlichen Situation ab. Versuchen Sie bei der Implementierung eines gemeinsamen unteren Menüs, unnötige Arbeitslast zu reduzieren und konzentrieren Sie sich auf die Wiederverwendung von Code und die Einfachheit des Codes, um so die Entwicklungseffizienz und die Lesbarkeit des Codes zu verbessern.

Das obige ist der detaillierte Inhalt vonSo teilen Sie ein unteres Menü in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!