uniapp は他のいくつかの TabBar ページのプリロードをどのように実装しますか?

近年、モバイル アプリケーションは人々の生活に欠かせないものになりました。モバイル アプリケーションの開発に伴い、TabBar デザインを採用するアプリケーションがますます増えており、特にアプリでは、TabBar が多くのアプリケーションの主要なナビゲーション方法となっています。その中でもUniappフレームワークは現在最も普及している軽量クロスプラットフォーム開発フレームワークと言えます。ただし、多くの開発者は、Uniapp を使用して TabBar アプリケーションを開発するときに、「他のいくつかの TabBar ページをプリロードするにはどうすればよいですか?」という共通の問題に遭遇するでしょう。

Uniapp の開発プロセス中に、pages.json でページを構成することで TabBar を作成できます。たとえば、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"
      }
    ]
  }
}

この構成ファイルでは、4 つのページを定義し、TabBar を作成します。このうち、各ページは TabBar のメニュー項目に対応します。さまざまなメニュー項目をクリックすると、Uniapp は対応するページにジャンプします。

ただし、このプロセスでは、Uniapp は現在のページが読み込まれるときにのみプリロードし、他のページはプリロードしません。したがって、ある TabBar ページから別の TabBar ページに切り替えると、ページの読み込みが遅くなり、ユーザー エクスペリエンスに影響を与える可能性があります。では、この問題をどうやって解決すればよいでしょうか?

他の TabBar ページをプリロードする方法:

Uniapp では、uni.request を使用して他の TabBar ページをプリロードできます。このメソッドは、GETリクエストを送信することで指定したページのデータを取得し、そのデータをキャッシュすることができます。対応する TabBar メニュー項目をクリックすると、システムはまずデータがキャッシュに存在するかどうかを確認します。キャッシュに存在する場合は、データを直接表示します。存在しない場合は、再度リクエストを送信してキャッシュします。データ。

pages.json で、プリロード フィールドを追加して、プリロードする必要があるページ URL を定義します。

{
  "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": {
    ...
  }
}

上記の構成ファイルでは、カテゴリ、カート、および自分ページの新しいフィールドを追加します。 . preload 属性を追加し、true に設定しました。これは、アプリのホームページが読み込まれると、Uniapp がこれらのページを自動的に読み込み、ローカルにキャッシュすることを意味します。

次に、App.vue で uni.request を呼び出して、ページのプリロード関数を実装します。

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

上記のコードでは、App.vue .request の onLoad メソッドで uni を渡します。カテゴリ、カート、自分ページのデータを取得し、ローカルにキャッシュします。

TabBar メニュー項目がクリックされると、メニュー項目のインデックスに基づいて対応するページ URL を取得し、ページがローカルにキャッシュされているかどうかを確認します。キャッシュされている場合は、データがキャッシュから直接読み取られてページがレンダリングされます。キャッシュされていない場合は、GET リクエストが送信されてデータを取得し、ローカルにキャッシュされてからページがレンダリングされます。

上記は、Uniapp で他の TabBar ページをプリロードする方法です。ページをプリロードすることで、ユーザーが TabBar メニュー項目をクリックしてページを切り替えたときに、対応するページをすばやく表示できるため、ユーザー エクスペリエンスが向上します。

以上がuniapp は他のいくつかの TabBar ページのプリロードをどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。