收藏
评论

小程序自定义tabBar(类似咸鱼)


在App上做类似咸鱼的Tabbar时,只能用自定义的方法,考虑小程序中如果想自定义像咸鱼这样的Tabbar,该如何实现呢?网上搜索的大多资料的tabbar都会在页面切换的时候重新渲染,下面的方法页面跳转时不会闪。




效果图


下载地址:https://github.com/dt8888/tabbar

具体实现方法:
1.分装一个tabbar的组件属性列表实现项目的Tabbar的个数,文字,颜色,图片大小最好用官网推荐的81px*81px的icon。


JS关键代码为:

properties: {
    tabbar: {
      type: Object,
      value: {
        "backgroundColor": "#ffffff",
        "color": "#979795",
        "selectedColor": "#1c1c1b",
        "list": [
          {
            "pagePath": "pages/index/index",
            "iconPath": "icon/icon_home.png",
            "selectedIconPath": "icon/icon_home_HL.png",
            "text": "首页"
          },
          {
            "pagePath": "pages/middle/middle",
            "iconPath": "icon/icon_release.png",
            "isSpecial": true,
            "text": "发布"
          },
          {
            "pagePath": "pages/mine/mine",
            "iconPath": "icon/icon_mine.png",
            "selectedIconPath": "icon/icon_mine_HL.png",
            "text": "我的"
          }
        ]
      }
    }
},



2.在App.js中的onLaunch方法中 用wx.hideTabBar();隐藏系统自带的tabbar,点击时作为按钮选中的判断方法为:


editTabbar: function () {
    let tabbar = this.globalData.tabBar;
    let currentPages = getCurrentPages();
    let _this = currentPages[currentPages.length - 1];
    let pagePath = _this.route;
    if(pagePath.indexOf('/') != 0){
      pagePath = '/' + pagePath;
    }
    for (let i in tabbar.list) {
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },


如何引用该项目实现自己的自定义Tabbar:

1.找到项目中的tabbarComponent目录,放到自己的工程中,然后将tabbarComponent->icon图标替换成你自己的tabbar图片,文字颜色根据需求做适当的更改。
2.app.json中配置tabBar,因为点击发布时做的页面跳转,不配置在tabBar的list中。
3.在app.js中的globalData中加入自定义tabbar的参数,再加入一个方法给tabBar.list配置中的页面使用。
4.在页面的JS中的data中加入tabbar:{},并在onload方法中调用app.editTabbar();
5.页面的.json文件中加入代码


"usingComponents": {
"tabbar": "../../tabbarComponent/tabbar"
}


6.在页面的.wxml文件中加入<tabbar tabbar="{{tabbar}}"></tabbar>


作者: honey缘木鱼


最后一次编辑于  2019-01-10
赞 4
收藏

6 个评论

  • 爱睡觉-羅
    爱睡觉-羅
    2019-07-31

    看这个代码,还是存在自定义tabbar会闪一下的问题,只是加载过之后就没闪了。而且刚开始加载的时候,原生tabbar还是会出现一下

    2019-07-31
    赞同
    回复
  • yy
    yy
    2019-04-23

    这样刷新页面的时候,会加载原生的tabbar然后隐藏 然后再猜显示自定义的tabbar这样用户体验会不会不好哦

    2019-04-23
    赞同
    回复 1
    • 爱睡觉-羅
      爱睡觉-羅
      2019-07-31
      对,看他写的这个代码,还是存在自定义tabbar会闪一下的问题,只是加载过之后就没闪了。而且一开始确实会先显示原生tabbar
      2019-07-31
      回复
  • Arnold
    Arnold
    2019-03-07

    请问,会被canvas 覆盖怎么解决?

    2019-03-07
    赞同
    回复
  • hsg
    hsg
    2019-01-15

    页面如果开启了下拉刷新,tabbar 会和页面一起弹性拉动,怎么破?

    2019-01-15
    赞同
    回复 2
    • āáǎà
      āáǎà
      2019-01-17

      用固定定位,然后解决iphone用户可以整体拖动页面容器,具体如下:

      在对应的页面json文中添加

      "disableScroll":true


      2019-01-17
      回复
    • 爱会多美
      爱会多美
      2019-01-24回复āáǎà

      看过了,我就是这么做的,可为什么我下拉刷新页面的时候,tabbar也下去了呢,没有固定

      <view style='position:fixed;bottom:0;'>

       <tabbar tabbar='{{tabbar}}' ></tabbar>

      </view>

      ---------------

      在对应的页面json文中也添加了

      "disableScroll":true


      2019-01-24
      回复
  • 有理想🇨🇳
    有理想🇨🇳
    2019-01-14

    能不能一次都不闪 ~~

    2019-01-14
    赞同
    回复
  • 沉冰
    沉冰
    2019-01-11

    谢谢分享,正好最近用得上

    2019-01-11
    赞同
    回复
登录 后发表内容