Bagaimana untuk menetapkan bar tab uniapp dalam program mini

Dengan perkembangan program mini, semakin ramai orang telah menyertai barisan pembangunan program mini. Uniapp ialah alat pembangunan merentas platform yang boleh mencapai kesan membangunkan berbilang terminal (termasuk program kecil) dengan satu set kod. Jadi, bagaimana untuk menetapkan bar tab uniapp dalam program mini?

Pertama sekali, menetapkan bar tab dalam uniapp perlu dikonfigurasikan dalam fail pages.json. Dalam program mini, kita perlu terlebih dahulu menukar pilihan bar tab dalam fail pages.json ke dalam sintaks program mini. Khususnya, text, pagePath, iconPath dan selectedIconPath setiap item dalam senarai dalam tabBar mesti ditukar kepada sintaks program mini yang sepadan seperti berikut:

"tabBar": {
  "list": [
    {
      "text": "首页",
      "iconPath": "static/img/tabbar/home.png",
      "selectedIconPath": "static/img/tabbar/home-active.png",
      "pagePath": "pages/index/index"
    },
    {
      "text": "分类",
      "iconPath": "static/img/tabbar/cate.png",
      "selectedIconPath": "static/img/tabbar/cate-active.png",
      "pagePath": "pages/cate/cate"
    }
  ]
}

Kemudian , dalam halaman program mini, kita perlu menggunakan kaedah uni.getTabBar() untuk mendapatkan objek bar tab program mini, dan kemudian buat tetapan yang sepadan mengikut bar tab yang dikonfigurasikan dalam uniapp. Kod tersebut adalah seperti berikut:

<template>
  <view>
    <text>首页</text>
  </view>
</template>

<script>
  export default {
    onShow() {
      // 获取tabbar对象
      let tabBar = uni.getTabBar();
      // 设置当前tab的下标
      tabBar.setSelectedItem({
        index: 0
      });
      // 设置当前tab的文字
      tabBar.setItemText({
        index: 0,
        text: '首页'
      });
      // 设置当前tab的图标
      tabBar.setIcon({
        index: 0,
        iconPath: 'static/img/tabbar/home.png',
        selectedIconPath: 'static/img/tabbar/home-active.png'
      });
    }
  }
</script>

Dalam kod di atas, onShow ialah fungsi cangkuk dalam kitaran hayat applet, yang akan dipanggil secara automatik apabila halaman dipaparkan dalam applet. Dalam fungsi cangkuk ini, kami memperoleh objek tabbar applet, dan kemudian menetapkannya mengikut bar tab yang dikonfigurasikan dalam uniapp.

Akhir sekali, tetapan di atas diperlukan pada setiap halaman program mini. Untuk mengelakkan kod berulang dan masalah yang tidak perlu, kami boleh menggunakan ciri mixin yang disediakan oleh uniapp untuk merangkum tetapan ini ke dalam mixin dan kemudian merujuknya dalam halaman yang perlu digunakan. Kod khusus adalah seperti berikut:

// tabBarMixin.js
export default {
  onShow() {
    // 获取当前页面路径
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1].route
    // 获取tabbar对象
    let tabBar = uni.getTabBar();
    // 遍历tabbar中的每一个tab，找到与当前页面路径匹配的tab
    tabBar.list.forEach((item, index) => {
      if (item.pagePath == currentPage) {
        // 设置当前tab的下标
        tabBar.setSelectedItem({
          index: index
        });
        // 设置当前tab的文字
        tabBar.setItemText({
          index: index,
          text: item.text
        });
        // 设置当前tab的图标
        tabBar.setIcon({
          index: index,
          iconPath: item.iconPath,
          selectedIconPath: item.selectedIconPath
        });
      }
    });
  }
}

// index.vue
<script>
import tabBarMixin from '@/mixins/tabBarMixin'

export default {
  mixins: [tabBarMixin]
}
</script>

Dalam kod di atas, kami merangkum semua tetapan bar tab ke dalam campuran, dan kemudian merujuknya dalam halaman yang perlu digunakan. Kelebihan ini ialah ia boleh mengelakkan pertindihan kod, dan ia juga boleh menguruskan tetapan bar tab dengan mudah dan seragam.

Ringkasnya, apabila uniapp menetapkan bar tab di bawah program mini, ia perlu terlebih dahulu menukar konfigurasi dalam fail pages.json ke dalam sintaks program mini, dan kemudian menggunakan kaedah uni.getTabBar() untuk mendapatkan objek tabbar dalam halaman program mini Tetapkan mengikut bar tab yang dikonfigurasikan dalam uniapp. Untuk mengelakkan pertindihan kod, tetapan bar tab boleh dirangkumkan ke dalam campuran dan dirujuk dalam halaman yang perlu digunakan.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan bar tab uniapp dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!