收藏
回答

自定义 tabbar 问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug tabbar 客户端 7.0.0 2.5.0

- 需求的场景描述(希望解决的问题)

希望是这样的tabbar:


- 希望提供的能力

根据官方自定义tabbar文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

并且参考了大神的帖子:https://developers.weixin.qq.com/community/develop/doc/000c6e038c0ce05413f71e7ce56c04

发现真机运行和开发者工具运行效果不一样

  1. 真机(Android 微信7.0)运行起来一片白



  2. 开发者工具(1.02.1812271)运行起来,原来的tabbar和我自定义的tabbar都显示出来了


代码如下:

<cover-view class="tabbar-box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">

<block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">

<navigator class="tabbar-item" url="{{item.pagePath}}" open-type="switchTab">

<cover-image class="tabbar-icon {{item.isSpecial ? 'tabbar-special':''}}" src="{{item.isSelected ? item.selectedIconPath:item.iconPath}}" />

</navigator>

</block>

</cover-view>



最后一次编辑于  2019-01-15
回答关注问题邀请回答
收藏

3 个回答

  • 茂$。$
    茂$。$
    2019-01-14

    看一下这个博主写的组件

    https://developers.weixin.qq.com/community/develop/doc/000c6e038c0ce05413f71e7ce56c04

    2019-01-14
    有用 1
    回复 5
    • hsg
      hsg
      2019-01-14

      谢谢,我看了,这个确实是目前最好的例子了,但是他不是按照官方教程的方法来的,并且这个会闪一下

      2019-01-14
      回复
    • 灰色轨迹
      灰色轨迹
      2019-01-15回复hsg

      这个真机是不会闪的吧,wx.hidetabBar()。我这就是,只有工具会闪

      2019-01-15
      回复
    • 灰色轨迹
      灰色轨迹
      2019-01-15

      但是手机都不一样,没有保障。也不敢用,还是等官方改善了,再用吧

      2019-01-15
      回复
    • hsg
      hsg
      2019-01-16回复灰色轨迹

      第一次点击tabbar的时候会有一点点

      2019-01-16
      回复
    • 灰色轨迹
      灰色轨迹
      2019-01-16回复hsg

      我这没闪啊。还有自己定义的底部导航栏用rpx,平板的就很大了,内容一屏显示不全有时候。

      2019-01-16
      回复
  • 即将有人鱼线的李先森
    即将有人鱼线的李先森
    2019-01-15

    先做一个原生的tabbar,然后再写一个自定义的tabbar,然后在onload的方法里hide掉原生的,跳转方式用switchTab就可以了。

    2019-01-15
    有用
    回复 4
    • hsg
      hsg
      2019-01-16

      现在就是这么弄的,但是如果页面有下拉刷新和上拉加载更多就麻烦了:自定义的tabbar在iOS上会随页面一起弹性滑动,即使你fixed的也没用

      2019-01-16
      回复
    • 即将有人鱼线的李先森
      即将有人鱼线的李先森
      2019-01-16回复hsg

      我上线了好几款小程序了,基本都是采用这种做法,自定义的tabbar不会随页面滚动,无论是安卓还是ios,如果可以的话,你可以提供一些代码片段,看一下是怎么回事。

      2019-01-16
      回复
    • 墨染的天空
      墨染的天空
      2019-01-16

      enablePullDownRefresh:true ,下拉的时候,你的自定义tabbar不会跟随页面向下跑?


      2019-01-16
      回复
    • 即将有人鱼线的李先森
      即将有人鱼线的李先森
      2019-01-16回复墨染的天空

      我刚才重新测试了一下,自定义的tabbar,在安卓上是会跟着页面向下跑的,ios不会。

      2019-01-16
      回复
  • 灰色轨迹
    灰色轨迹
    2019-01-15

    我也是遇到了这种问题,真机是好的。就是工具俩导航栏都显示出来了。

    2019-01-15
    有用
    回复
登录 后发表内容