H5下custom-tab-bar不支持

NervJS / taro

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

https://docs.taro.zone/

Other

35.37k stars 4.78k forks source link

H5下custom-tab-bar不支持 #10049

Open m430 opened 3 years ago

m430 commented 3 years ago

复现步骤

按照官方的自定义tabbar进行配置后。发现小程序可以正常显示，但是H5不显示

期望结果

H5也支持自定义tabbar

实际结果

不支持

环境信息

👽 Taro v3.3.3

  Taro CLI 3.3.3 environment info:
    System:
      OS: macOS 11.2.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 16.4.2 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 7.18.1 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.3.3 => 3.3.3 
      @tarojs/mini-runner: 3.3.1 => 3.3.1 
      @tarojs/react: 3.3.3 => 3.3.3 
      @tarojs/runtime: 3.3.3 => 3.3.3 
      @tarojs/taro: 3.3.3 => 3.3.3 
      @tarojs/webpack-runner: 3.3.1 => 3.3.1 
      babel-preset-taro: 3.3.1 => 3.3.1 
      eslint-config-taro: 3.3.1 => 3.3.1 
      postcss-pxtransform: 3.3.2 => 3.3.2 
      react: ^17.0.0 => 17.0.2 
      taro-ui: 3.0.0-alpha.2 => 3.0.0-alpha.2

luckyGTL commented 3 years ago

可以啊，你重新跑一下试试

Ruoleery commented 2 years ago

遇到同样的问题，h5 展示的不是自定义的 tabbar 组件，而是 taro 默认的 tabbar 组件

3N26 commented 2 years ago

我目前这样处理了

.taro-tabbar__tabbar-bottom {
  display: none;
}

lexmin0412 commented 2 years ago

同遇到，表现同3楼

lexmin0412 commented 2 years ago

看了下代码，目前H5下的默认tabbar是在 @tarojs/router 中通过插入DOM来进行初始化的，直接没有实现自定义tabbar的场景，只能等待大佬了...

https://github.com/NervJS/taro/blob/2239a4245083c0cc5083bdd58d263d46dc0273cb/packages/taro-router/src/tabbar.ts#L10

Samdyddd commented 2 years ago

思考角度感觉可以选择节点来清除掉

QingyunYang commented 2 years ago

我目前这样处理了
.taro-tabbar__tabbar-bottom {
  display: none;
}

我这样处理不行哎。。，底部会出现高50的空白区域

xiaoheikejj commented 1 year ago

有没有哪位大佬把这个问题解决了？

brileyhe commented 1 year ago

坐等解决，用了custom-tab-bar。小程序正常，h5显示了默认（app.config.ts tabbar 配置的list）

miaojinsing commented 1 year ago

taro 不适用h5 原生写都比用taro好

lonelyWalkor commented 1 year ago

坐等官方支持 h5 自定义tabbar

lonelyWalkor commented 1 year ago

import FooterTabbar from '@/custom-tab-bar/index';

我是这样实现的
然后影藏掉原本的tabbar 贴出来供大家参考

toFrankie commented 9 months ago

所以快 2024 年了，还不支持？

xiaoxiangshu commented 9 months ago

遇到同样的问题了，官方什么时候支持一下啊

xuchen522178898 commented 6 months ago

2024 年了，还不支持吗？我目前打算将自定义tabbar组件在 h5下，生成实例插入 taro-tabbar__container 下的 taro-tabbar 元素的dom节点里面，就是不知道在什么时机去弄

15157757001 commented 2 months ago