专栏首页娱乐心理测试自定义tabBar(类似咸鱼)

自定义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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 面试中单例模式有几种写法

    纠结单例模式有几种写法有用吗?有点用,面试中经常选择其中一种或几种写法作为话头,考查设计模式和coding style的同时,还很容易扩展到其他问题。这里讲解几...

    哲洛不闹
  • 编程,从来都不晚:来自日本的82岁APP开发者

    82岁的若宮正子第一次工作时,还是使用算盘来进行计算——而如今,她是世界上年纪最大的iPhone应用开发者之一,也是使得智能手机走入老年人生活的先驱者。

    哲洛不闹
  • 盲式出轨,上流社会边缘人士,2018朋友圈流行词,哪个词说中了你?

    哲洛不闹
  • 这些拍案惊奇的智障桥段,分明是在蔑视我作为程序员的debug

    作为在网络高速发展的时代背景下成长起来的一代人,网络文学几乎伴随着我们的整个青春。

    一墨编程学习
  • 华为、腾讯、阿里、网易员工下班时间大曝光,为什么赢不了他们

    这年头,不加班都不好意思说自己是上班族的。但有一种行业的疯狂加班程度,已经逐渐成为加班领域的一颗新星——互联网行业从事者!

    哲洛不闹
  • 我的编码习惯 - 参数校验和国际化规范

    今天我们说说参数校验和国际化,这些代码没有什么技术含量,却大量充斥在业务代码上,很可能业务代码只有几行,参数校验代码却有十几行,非常影响代码阅读,所以很有必要把...

    哲洛不闹
  • 博君一笑

    哲洛不闹
  • 电商平台分账交易是怎么做的?

    另一篇文章讲到了电商平台的“二清”模式,在实际中,很多互联网电商平台需要分账给上面的平台商户或者其他角色,如果从严格的“二清”界定上来讲部分是属于违规进行了“信...

    金融民工小曾
  • 自定义控件基础 之 3.4 ViewGroup的测量 & 3.5 ViewGroup的绘制

    之前分析中说了,ViewGroup会去管理其子View,其中一个管理项目就是负责子View的显示大小。当ViewGroup的大小为wrap_content时,V...

    凌川江雪
  • 华为加班到底有多恐怖?

    “我先说一下我的吧。昨天晚上好不容易11点之前搞完上线回到家,刚开门媳妇就叫到:你TMD给我站到阳台去!”

    哲洛不闹

扫码关注云+社区

领取腾讯云代金券