Bagaimanakah uniapp melaksanakan pramuat beberapa halaman TabBar yang lain?

Dalam beberapa tahun kebelakangan ini, aplikasi mudah alih telah menjadi bahagian penting dalam kehidupan orang ramai. Dengan pembangunan aplikasi mudah alih, semakin banyak aplikasi menggunakan reka bentuk TabBar, terutamanya dalam aplikasi, TabBar telah menjadi kaedah navigasi utama untuk banyak aplikasi. Antaranya, rangka kerja Uniapp boleh dikatakan sebagai rangka kerja pembangunan merentas platform ringan yang paling popular pada masa ini. Walau bagaimanapun, ramai pembangun akan menghadapi masalah biasa apabila menggunakan Uniapp untuk membangunkan aplikasi TabBar: Bagaimana untuk pramuat beberapa halaman TabBar yang lain?

Semasa proses pembangunan Uniapp, TabBar boleh dibuat dengan mengkonfigurasi halaman dalam pages.json. Contohnya, takrifkan halaman berikut dalam 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"
      }
    ]
  }
}

Dalam fail konfigurasi ini, kami mentakrifkan 4 halaman dan mencipta TabBar. Antaranya, setiap halaman sepadan dengan item menu dalam TabBar. Apabila kami mengklik pada item menu yang berbeza, Uniapp akan melompat ke halaman yang sepadan.

Walau bagaimanapun, dalam proses ini, Uniapp hanya akan pramuat halaman semasa apabila ia dimuatkan dan tidak akan pramuat halaman lain. Oleh itu, apabila kita bertukar daripada satu halaman TabBar ke halaman yang lain, halaman tersebut mungkin dimuatkan dengan perlahan, menjejaskan pengalaman pengguna. Jadi, bagaimana untuk menyelesaikan masalah ini?

Kaedah untuk pramuat halaman TabBar lain:

Dalam Uniapp, kami boleh pramuat halaman TabBar lain dengan menggunakan uni.request. Kaedah ini boleh mendapatkan data halaman yang ditentukan dengan menghantar permintaan GET dan cache data. Apabila kita mengklik item menu TabBar yang sepadan, sistem akan menyemak sama ada data wujud dalam cache. Jika ia wujud dalam cache, ia akan memaparkan data secara langsung Jika ia tidak wujud, ia akan menghantar permintaan semula dan cache data tersebut.

Dalam pages.json, tambah medan pramuat untuk mentakrifkan URL halaman yang perlu dipramuat:

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

Dalam fail konfigurasi di atas, kami menambah kategori, troli dan saya Halaman mempunyai atribut pramuat baharu dan ditetapkan kepada benar. Ini bermakna apabila halaman utama Apl dimuatkan, Uniapp akan memuatkan halaman ini secara automatik dan menyimpannya secara setempat.

Seterusnya, kami memanggil uni.request dalam App.vue untuk melaksanakan fungsi pramuat halaman:

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

Dalam kod di atas, kami menggunakan kaedah onLoad App.vue Use uni .permintaan untuk mendapatkan data halaman kategori, troli dan saya dan cache mereka secara setempat.

Apabila item menu TabBar diklik, kami akan memperoleh URL halaman yang sepadan berdasarkan indeks item menu dan menyemak sama ada halaman tersebut telah dicache secara setempat. Jika ia dicache, data dibaca terus dari cache dan halaman itu dipaparkan; jika ia tidak dicache, permintaan GET dihantar untuk mendapatkan data dan dicache secara setempat, dan kemudian halaman itu diberikan.

Di atas ialah cara untuk pramuat halaman TabBar lain dalam Uniapp. Dengan pramuat halaman, kami boleh memaparkan halaman yang sepadan dengan cepat apabila pengguna mengklik item menu TabBar untuk menukar halaman, sekali gus meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah uniapp melaksanakan pramuat beberapa halaman TabBar yang lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!