自定义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>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.09.10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读