公告列表
公告列表
收藏
评论

小程序自定义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
收藏

7 个评论

  • Arnold
    Arnold
    2019-03-07

    请问，会被canvas 覆盖怎么解决？

    2019-03-07
    赞同 1
    回复 1
    • 万事胜意
      万事胜意
      2023-05-03
      佬,怎么解决
      2023-05-03
      赞
      回复
  • 
    2021-05-08

    今天下午贼困,有机会再来看这个吧,虽然项目急,但挡不住困意啊=_=

    2021-05-08
    赞同
    回复
  • 爱睡觉-羅
    爱睡觉-羅
    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
      赞
      回复
  • 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
    赞同
    回复
请 登录 后发表内容