How to set uniapp's tabbar in a mini program

With the development of small programs, more and more people have joined the ranks of small program development. Uniapp is a cross-platform development tool that can achieve the effect of developing multiple terminals (including small programs) with one set of code. So, how to set the tabbar of uniapp in the mini program?

First of all, setting tabbar in uniapp needs to be configured in the pages.json file. In the mini program, we need to first convert the tabbar option in the pages.json file into the syntax of the mini program. Specifically, the text, pagePath, iconPath, and selectedIconPath of each item in the list in the tabBar must be converted into The corresponding mini program syntax is as follows:

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

Then, in the mini program page, we need to use the uni.getTabBar() method to get the tabbar object of the mini program, and then configure it according to the uniapp tabbar to make corresponding settings. The code is as follows:

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

In the above code, onShow is a hook function in the applet life cycle, which will be automatically called when the page is displayed in the applet. In this hook function, we obtain the tabbar object of the applet, and then set it according to the tabbar configured in uniapp.

Finally, the above settings need to be made in each page of the mini program. In order to avoid repeated code and unnecessary trouble, we can use the mixin feature provided by uniapp to encapsulate these settings into a mixin, and then reference it in the page that needs to be used. The specific code is as follows:

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

In the above code, we encapsulate all tabbar settings into a mixin, and then reference it in the page that needs to be used. The advantage of this is that it can avoid code duplication, and it can also conveniently and uniformly manage tabbar settings.

In summary, when uniapp sets the tabbar under the mini program, it needs to first convert the configuration in the pages.json file into the syntax of the mini program, and then use ## in the mini program page. #uni.getTabBar()The method obtains the tabbar object and sets it according to the tabbar configured in uniapp. In order to avoid duplication of code, the tabbar settings can be encapsulated into a mixin and referenced in the pages that need to be used.

The above is the detailed content of How to set uniapp's tabbar in a mini program. For more information, please follow other related articles on the PHP Chinese website!