taro自定义底部导航栏视图中使用nut-tabbar样式失效

[KevinnZou]

NutUI scenes（nutui 场景）

小程序（@nutui/nutui-taro）

NutUI-vue version（nutui-vue 版本）

3.2.7

Vue version（vue 版本）

3.2.45

Operating environment（运行环境）

dev:weapp

Citation method（引用方式）

npm

Node version（node 版本）

16.15.1

Browser and its version（浏览器及其版本）

Chrome(107.0.5304.110)

System and its version（系统及其版本）

MacOS(11.6)

Taro environmental information（taro 环境信息）

👽 Taro v3.5.7

Taro CLI 3.5.7 environment info: System: OS: macOS 11.6 Shell: 5.8 - /bin/zsh Binaries: Node: 16.15.1 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.11.0 - /usr/local/bin/npm npmPackages: @tarojs/cli: 3.5.7 => 3.5.7 @tarojs/components: 3.5.7 => 3.5.7 @tarojs/helper: 3.5.7 => 3.5.7 @tarojs/plugin-framework-vue3: 3.5.7 => 3.5.7 @tarojs/plugin-html: 3.5.7 => 3.5.7 @tarojs/plugin-platform-alipay: 3.5.7 => 3.5.7 @tarojs/plugin-platform-jd: 3.5.7 => 3.5.7 @tarojs/plugin-platform-qq: 3.5.7 => 3.5.7 @tarojs/plugin-platform-swan: 3.5.7 => 3.5.7 @tarojs/plugin-platform-tt: 3.5.7 => 3.5.7 @tarojs/plugin-platform-weapp: 3.5.7 => 3.5.7 @tarojs/router: 3.5.7 => 3.5.7 @tarojs/runtime: 3.5.7 => 3.5.7 @tarojs/shared: 3.5.7 => 3.5.7 @tarojs/taro: 3.5.7 => 3.5.7 @tarojs/taro-h5: 3.5.7 => 3.5.7 @tarojs/webpack5-runner: 3.5.7 => 3.5.7 babel-preset-taro: 3.5.7 => 3.5.7 eslint-config-taro: 3.5.7 => 3.5.7

Reproduction link（重现链接）

github.com

Steps to reproduce（重现步骤）

https://docs.taro.zone/docs/custom-tabbar 按照这个指南完成自定义底部导航栏配置，导航栏视图采用nut-tabbar编写，样式会失效

<template>
  <view class="tabbar">
    <nut-tabbar @tab-switch="tabSwitch">
      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
    </nut-tabbar>
  </view>
</template>

What is expected?（期望的结果是什么？）

正确展示nut-tabbar样式

What is actually happening?（实际的结果是什么？）

样式失效，只有普通文字

[Drjingfubo]

提个最小仓库看下，你提供的链接是taro仓库的

[KevinnZou]

我懒得再搞个仓库了，问题描述的挺清楚的了，把我提供的taro仓库的样式代码替换成我上面那段代码块就能复现了。我估计是自定义tabbar不会自动引入样式库导致的，你们可以提供下tabbar样式库的路径吗

[KevinnZou]

这个问题我通过手动引入样式表解决了，但是又出现了新的问题，在tabSwitch回调中加入Taro.switchTab会导致tabbar状态异常。表现为切换tab时，switchTab能触发，但是UI样式没有更新，及tab还是显示为之前的tab。建议你们尝试下taro自定义底部导航栏中使用nut-tabbar来编写视图，实现tab跳转等基础功能看看有没有bug。这个如果都没法跑通的话有点入门及劝退了。。。

[Drjingfubo]

如果你要使用taro的custom-tab-bar，就按照taro仓库的写，如果使用nutui的tabbar，直接使用即可。 至于切换tab，switchTab能触发，但是UI样式没有更新，在方法里边写页面跳转了吗，截图看下代码

[KevinnZou]

现在的需求是要在taro的custom-tab-bar里用nutui的tabbar。 切换tab的问题，没有更新UI的是nut-tabbar自身的选中样式，和我页面跳转没关系。而且是tabSwitch里调用了Taro.switchTab才会导致你们nut-tabbar不更新选中状态。简单讲就是我点了tab2，触发了tabswitch的回调，但是tabbar组件没有切换到tab2选中状态。

<template>
  <view class="tabbar">
    <nut-tabbar @tab-switch="tabSwitch">
      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
    </nut-tabbar>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import { Router } from "tarojs-router-next";
export default {
  setup() {
    const routerList = ["/pages/index/index", "/pages/user/index"];
    function tabSwitch(item, index) {
      console.log(item, index);
      // 下面这行代码注释，一切功能正常。否则tabbar选中状态更新有问题
      Taro.switchTab({ url: routerList[index] });
    }

    return {
      tabSwitch,
    };
  },
};
</script>

<style lang="scss">
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

// 为了让你们的tabbar正常显示手动引入的样式表
@import "@nutui/nutui-taro/dist/packages/tabbar/index.scss";
@import "@nutui/nutui-taro/dist/packages/tabbaritem/index.scss";
@import "./nuticon.scss";
</style>

[Drjingfubo]

v-model:visible 使用这个属性在tabSwitch方法中为tabbar赋上选中态试下

[KevinnZou]

没有改变，它不是每次点击都不更新状态，是每次第一次不行，再点一次就会更新，但再点又不更新，表现很奇怪。建议你们本地试一下，感觉是个bug

[lovelyqun]

我也有这么问题,H5正常,小程序第一次点击切换事件生效但是UI不更新,再次点击ui更新

[Drjingfubo]

嗯 我这边在跟进这个问题了

[KevinnZou]

我这边H5也试了一下，点击跳转是正常的，但是icon又不展示了。最好能有一套官方的demo能在两端都能正常展示

[Drjingfubo]

我这边H5也试了下，点击跳转是正常的，但是图标又没有显示了。最好能有一套官方的demo能在两端都能正常显示

这个给个复现仓库，没复现到icon不出现

[Drjingfubo]

晚点我提个demo上来

[Drjingfubo]

https://github.com/jdf2e/nutui-demo/tree/master/tabbar-demo
因为custom-tab-bar样式隔离的问题，所以这里采用demo中的写法

[KevinnZou]

这样的写法就违背了我们使用自定义tabbar的初衷了，等于每个tab页都要引入组件了，当初去看这个就是不想用组件的方法做。样式隔离问题你可以看眼我上面的代码，可以通过引入样式表来解决。主要问题是选择状态的UI更新，你可以基于我的做法debug一下。我怀疑确实是要用状态管理，因为每次切换都会产生一个新的实例，我回头试一下吧

[Drjingfubo]

ok，不论你选择哪种写法，能满足功能即可。选中态值是必需的，不然每次切换组件内部以后无法找到选中的哪个。

[Drjingfubo]

你的那种写法我也尝试了，保存一个状态来存取选中态就可以，就是需要在底部引入下样式，你将demo种component的index代码粘贴到custom-tab-bar中，再引入样式就可以生效了

[KevinnZou]

是的，加入状态管理index后不刷新的问题就解决了。感谢帮助！

[KevinnZou]

追加一个问题，tabbar上下的两条横线有可能去掉吗？我感觉icon离上面的线太近了，想加一点padding，但被线截断了。或者两条线直接的高度可调也行

[Drjingfubo]

截图标注看下问题

[KevinnZou]

这两条横线高度是写死的，调整不了，有可能去掉吗

[Drjingfubo]

把tabbar的高度调整一下应该能满足你这个需求呢吧

[KevinnZou]

没用，两条线的高度是写死的，不随高度变化

[Drjingfubo]

这两条线是tabbar的border，肯定随高度变化的

[Drjingfubo]