Wie implementiert Uniapp das Vorladen mehrerer anderer TabBar-Seiten?

In den letzten Jahren sind mobile Anwendungen zu einem wesentlichen Bestandteil des Lebens der Menschen geworden. Mit der Entwicklung mobiler Anwendungen übernehmen immer mehr Anwendungen das TabBar-Design, insbesondere in Apps ist TabBar für viele Anwendungen zur Hauptnavigationsmethode geworden. Unter diesen kann man sagen, dass das Uniapp-Framework derzeit das beliebteste leichte plattformübergreifende Entwicklungsframework ist. Viele Entwickler werden jedoch auf ein häufiges Problem stoßen, wenn sie Uniapp zum Entwickeln von TabBar-Anwendungen verwenden: Wie lade ich mehrere andere TabBar-Seiten vorab?

Während des Uniapp-Entwicklungsprozesses kann TabBar erstellt werden, indem die Seite in page.json konfiguriert wird. Definieren Sie beispielsweise die folgende Seite in „pages.json“:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {}
    },
    {
      "path": "pages/category/category",
      "style": {}
    },
    {
      "path": "pages/cart/cart",
      "style": {}
    },
    {
      "path": "pages/me/me",
      "style": {}
    }
  ],
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "static/tabbar/category.png",
        "selectedIconPath": "static/tabbar/category_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tabbar/cart.png",
        "selectedIconPath": "static/tabbar/cart_active.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "static/tabbar/me.png",
        "selectedIconPath": "static/tabbar/me_active.png"
      }
    ]
  }
}

In dieser Konfigurationsdatei definieren wir 4 Seiten und erstellen eine TabBar. Dabei entspricht jede Seite einem Menüpunkt in der TabBar. Wenn wir auf verschiedene Menüpunkte klicken, springt Uniapp zur entsprechenden Seite.

Allerdings lädt Uniapp bei diesem Vorgang nur die aktuelle Seite vor, wenn sie geladen wird, und lädt andere Seiten nicht vor. Wenn wir von einer TabBar-Seite zu einer anderen wechseln, kann es daher sein, dass die Seite langsam geladen wird, was sich auf die Benutzererfahrung auswirkt. Wie kann man dieses Problem lösen?

Methoden zum Vorabladen anderer TabBar-Seiten:

In Uniapp können wir andere TabBar-Seiten mithilfe von uni.request vorab laden. Diese Methode kann die Daten der angegebenen Seite durch Senden einer GET-Anfrage abrufen und die Daten zwischenspeichern. Wenn wir auf den entsprechenden TabBar-Menüpunkt klicken, prüft das System zunächst, ob die Daten im Cache vorhanden sind. Wenn sie nicht vorhanden sind, wird die Anfrage erneut gesendet und zwischengespeichert die Daten.

Fügen Sie in „pages.json“ ein Preload-Feld hinzu, um die Seiten-URL zu definieren, die vorab geladen werden muss:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {}
    },
    {
      "path": "pages/category/category",
      "style": {},
      "preload": true
    },
    {
      "path": "pages/cart/cart",
      "style": {},
      "preload": true
    },
    {
      "path": "pages/me/me",
      "style": {},
      "preload": true
    }
  ],
  "tabBar": {
    ...
  }
}

In der obigen Konfigurationsdatei haben wir das Preload-Attribut für die Kategorie-, Warenkorb- und Me-Seiten hinzugefügt und es auf „true“ gesetzt . Das bedeutet, dass Uniapp beim Laden der App-Homepage diese Seiten automatisch lädt und lokal zwischenspeichert.

Als nächstes rufen wir uni.request in App.vue auf, um die Seitenvorladefunktion zu implementieren:

<template>
  <div class="app">
    <uni-tab-bar :list="tabBar.list" :color="tabBar.color" :selected-color="tabBar.selectedColor" :background-color="tabBar.backgroundColor" :border-style="tabBar.borderStyle" @change="onTabChange"></uni-tab-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabBar: uni.getStorageSync('tabBar') || {
        color: '#999999',
        selectedColor: '#000000',
        backgroundColor: '#ffffff',
        borderStyle: 'black',
        list: []
      },
      currentTab: 0
    }
  },
  onLoad() {
    uni.request({
      url: '/pages/me/me',
      method: 'GET',
      success: (res) => {
        uni.setStorageSync('/pages/me/me', res.data)
      }
    })
    uni.request({
      url: '/pages/cart/cart',
      method: 'GET',
      success: (res) => {
        uni.setStorageSync('/pages/cart/cart', res.data)
      }
    })
    uni.request({
      url: '/pages/category/category',
      method: 'GET',
      success: (res) => {
        uni.setStorageSync('/pages/category/category', res.data)
      }
    })
  },
  methods: {
    onTabChange(e) {
      const url = this.tabBar.list[e.index].pagePath
      this.currentTab = e.index
      uni.setStorageSync('currentTab', e.index)
      let pageData = uni.getStorageSync(url)
      if (!pageData) {
        uni.showLoading()
        // 发送请求获取数据
        uni.request({
          url: url,
          method: 'GET',
          success: (res) => {
            uni.hideLoading()
            pageData = res.data
            // 将获取的数据缓存到本地
            uni.setStorageSync(url, pageData)
          }
        })
      }
    }
  }
}
</script>

Im obigen Code verwenden wir uni.request in der onLoad-Methode von App.vue, um Kategorie, Warenkorb und Daten von zu erhalten Meine Seite wird lokal zwischengespeichert.

Wenn auf einen TabBar-Menüpunkt geklickt wird, erhalten wir die entsprechende Seiten-URL basierend auf dem Index des Menüpunkts und prüfen, ob die Seite lokal zwischengespeichert wurde. Wenn sie zwischengespeichert ist, werden die Daten direkt aus dem Cache gelesen und die Seite gerendert; wenn sie nicht zwischengespeichert ist, wird eine GET-Anfrage gesendet, um die Daten abzurufen und lokal zwischenzuspeichern, und dann wird die Seite gerendert.

Oben erfahren Sie, wie Sie andere TabBar-Seiten in Uniapp vorab laden. Durch das Vorladen von Seiten können wir die entsprechende Seite schnell anzeigen, wenn der Benutzer auf den TabBar-Menüpunkt klickt, um die Seite zu wechseln, und so die Benutzererfahrung verbessern.

Das obige ist der detaillierte Inhalt vonWie implementiert Uniapp das Vorladen mehrerer anderer TabBar-Seiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!