用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

13

主题

14

帖子

160

积分

架构狮

Rank: 3Rank: 3

积分
160
2018-9-14 11:06:43 honey缘木鱼 架构狮 楼主 13718

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



效果图

具体实现方法:
1.分装一个tabbar的组件属性列表实现项目的Tabbar的个数,文字,颜色,图片大小最好用官网推荐的81px*81px的icon。
JS关键代码为:
[AppleScript] 纯文本查看 复制代码
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,点击时作为按钮选中的判断方法为:
[AppleScript] 纯文本查看 复制代码
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文件中加入代码
[AppleScript] 纯文本查看 复制代码
"usingComponents": {
"tabbar": "../../tabbarComponent/tabbar"
}
6.在页面的.wxml文件中加入<tabbar tabbar="{{tabbar}}"></tabbar>


厉害
发新帖
    您需要登录后才可以回帖 登录 | 立即注册