Taro小程序，自定义tabbar问题解决

Avengerrr

已于 2024-09-07 10:19:28 修改

阅读量1k

点赞数 6

文章标签： taro 小程序

于 2024-09-05 15:18:35 首次发布

本文链接：https://blog.csdn.net/Avengerrr/article/details/141930491

版权

技术框架：taro + vue3 + nutui + pinia

问题背景1：自定义tabbar，引用nutui的tabbar组件，通过获得页面路由，实现点击tabbar跳转页面

 <nut-tabbar
    v-model="currentTab"
    bottom
    placeholder
    unactive-color="#7d7e80"
    active-color="#1989fa"
    @tab-switch="tabSwitch"
  >
    <!-- name属性，作为匹配的标识符（默认值：当前标签的索引值） -->
    <nut-tabbar-item
      v-for="(item, index) in tabbarList"
      :key="item.pagePath"
      :name="item.pagePath"
      :tab-title="item.title"
      :icon="item.icon"
    >
    </nut-tabbar-item>
  </nut-tabbar>

当 currentTab 设定为 const currentTab = ref(appStore.activeTab)，appStore.activeTab 为从pinia 状态管理库中取得的state数据。

1.此时点击tabbar切换页面，能实现对应的页面跳转，但是出现点击对应的图标没有实现高亮。

2.点击两次图标才对应显示高亮。

3.点击不同tabbar，图标的高亮会出现在上一次点击过的图标。

解决办法：

在网上搜索参考一番后，自定义tabbar组件内 currentTab 需要设置为一个计算属性

const currentTab = computed(() => {
  return appStore.activeTab;
});

const tabSwitch = (item: any, url: string) => {
  // name属性，作为匹配的标识符（默认值：当前标签的index索引值）
  appStore.setActiveTab(url);
  switchTab({
    url: url,
    success: () => {
      console.log("store:", appStore.activeTab);
    },
  });
};

现在点击对应的tabbar图标能实现高亮，页面也能跳转到对应的页面。

问题背景2：引入nutui的icon图标时，引入iconfont会使自定义tabbar的icon消失显示不正常

解决问题方法：https://developer.aliyun.com/article/1600608

1.在 src/ 下创建 custom-tab-bar 文件夹：index.config.ts，配置如下

// index.config.ts
export default {
  component: true
}

2.安装 @nutui/icons-vue-taro 图标组件包后，在 config/index.ts 中加入以下配置（解决引入@nutui/icons-vue-taro后使用webpack5编辑报错）：

/*
    app.js错误:
    Error: module 'prebundle/vendors-node_modules_taro_weapp_prebundle_nutui_icons-vue-taro_js.wxss.js' is not defined,
      require args is './prebundle/vendors-node_modules_taro_weapp_prebundle_nutui_icons-vue-taro_js.wxss'
    */
    compiler: {
      type: 'webpack5',
      prebundle: { // 是否开启依赖预编译功能
        enable: false
      }
    }

3.官方文档说明：自定义 TabBar 组件使用小程序的 Component 构造器构造，开发者在处理样式隔离等问题时可以需要对 Component 进行配置。这时开发者可以给 React/Vue 编写的自定义组件这些配置项属性，Taro 会把它们放置到 Component 构造对象上，目前支持：options、externalClasses、behaviors。

<script>
  // 只支持 Options API 写法，不支持 <script setup>
  export default {
    options: {
      addGlobalClass: true,	// 解决tabbar样式隔离导致的<IconFont />图标无法显示问题
    },
  }
</script>
<script setup lang="ts">
	// 这里按正常继续书写代码...
</script>