微信小程序taro使用nutui自定义 Tabbar

微信小程序taro使用nutui自定义 Tabbar

nutui 根据官方教程按照，这里就不写了

1.打开app.config.ts,在window后新增加源文件如下

export default defineAppConfig({
  pages: [
    'pages/index/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  },
  // 一下都是新增内容包括usingComponents
  tabBar: {
    custom: true,
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页'
      },
      {
        pagePath: 'pages/my/index',
        text: '我的'
      }
    ]
  },
  "usingComponents": {}
})

新建pages/my/index目录及代码
2.添加 custom-tab-bar
在 src 目录下添加 custom-tab-bar 目录，注意custom-tab-bar的目录结构和pages同级。
结构如下：

├── config
├── src
|   └── custom-tab-bar
|   |    ├── index.config.ts
|   |    └── index.vue
|    ——— pages
└── package.json

index.config.ts填写如下

export default {
    "component": true
  }

注意:自定义 TabBar 组件使用小程序的 Component 构造器构造，开发者在处理样式隔离等问题时可以需要对 Component 进行配置。
并且只支持 Options API 写法，不支持 <script setup>。所以nutui官网的导航组件示例要改造下。index.vue如下：

<template>
  <nut-tabbar v-model="active" @tab-switch="tabSwitch">
    <nut-tabbar-item tab-title="Home">
      <template #icon>
        <Home></Home>
      </template>
    </nut-tabbar-item>
    <nut-tabbar-item tab-title="Category">
      <template #icon>
        <Category></Category>
      </template>
    </nut-tabbar-item>
    <nut-tabbar-item tab-title="Find">
      <template #icon>
        <Find></Find>
      </template>
    </nut-tabbar-item>
    <nut-tabbar-item tab-title="Cart">
      <template #icon>
        <Cart></Cart>
      </template>
    </nut-tabbar-item>
    <nut-tabbar-item tab-title="My">
      <template #icon>
        <My></My>
      </template>
    </nut-tabbar-item>
  </nut-tabbar>
</template>

<script>
import { ref } from 'vue'
import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro'

export default {
  options: {
      addGlobalClass: true,
  },
  components: {
    ref,Home, Category, Find, Cart, My
  },
  data() {
    const active = ref(0);
    return { active };
  },
  methods: {
    // 组件的方法
    tabSwitch(item,index){
      console.log(item, index)
    }
  },
}
</script>

这样就把nutui的导航引入进来的，但是还没有实现自己页面的跳转。

参考官网文档：
https://docs.taro.zone/docs/custom-tabbar
https://nutui.jd.com/taro/vue/4x/#/zh-CN/guide/intro